如何使用dc.js创建一行堆叠行图？

Question

在DC.js github上,Lon Riesberg的股票市场选择策略被列为使用dc.js库的示例.

Lon能够创建堆叠的行图并将其显示为单行.

我希望能够完成同样的事情.我只能弄清楚如何创建一个行图,如我的codepen和下面所示.

HTML

<script src="https://rawgit.com/mbostock/d3/master/d3.js" charset="utf-8"></script>
<script type="text/javascript" src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"></script>
<script type="text/javascript" src="https://rawgit.com/dc-js/dc.js/master/dc.js" ></script>


<div id="rowChart"></div>

使用Javascript

items = [
            {Id: "01", Name: "Red", Price: "1.00", Quantity: "1",TimeStamp:111},
            {Id: "02", Name: "White", Price: "10.00", Quantity: "1",TimeStamp:222},
            {Id: "04", Name: "Blue", Price: "9.50", Quantity: "10",TimeStamp:434},
            {Id: "03", Name: "Red", Price: "9.00", Quantity: "2",TimeStamp:545},
            {Id: "06", Name: "Red", Price: "100.00", Quantity: "2",TimeStamp:676},
            {Id: "05",Name: "Blue", Price: "1.20", Quantity: "2",TimeStamp:777}
        ];


var ndx = crossfilter(items);


var Dim = ndx.dimension(function (d) {return d.Name;})


var RowBarChart1 = dc.rowChart("#rowChart")
RowBarChart1
  .width(250).height(500)
  .margins({top: 20, left: 15, right: 10, bottom: 20})
  .dimension(Dim)
  .group(Dim.group().reduceCount())
  .elasticX(true)
  .label(function (d) {return d.key + "  " + d.value;})
  .ordering(function(d) { return -d.value })
  .xAxis().tickFormat(function(v){return v}).ticks(3);




dc.renderAll();

我如何将其作为堆叠的行图表,其中每个部分为"红色","白色"或"蓝色"并显示在一行中？

我的目标是拥有一个可以构建的工作示例.到目前为止的答案有所帮助,但我仍然无法建立这个.

Answer 1

您可以使用 d3.js 创建一个 div 并添加 flex 属性...

http://codepen.io/luarmr/pen/BNQYov

var chart = d3.select("#rowChart");

var bar = chart.selectAll("div")
    .data(data)
    .enter().append("div")
      .attr('style',function(d,i){
      return (
         'flex:' + d.Quantity + '; '
         + 'background:' + color(i) + ';'
        )
    })

attr.style 可以改进。

您可以添加 webkit 的前缀

http://caniuse.com/#search=flex

编辑

http://codepen.io/luarmr/pen/yNVZMN