如何用dc.js创建一行堆栈的行图？

Question

在DC.js github上，作为使用dc.js库的示例列出了Stock Market Selection Strategy by Lon Riesberg。

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

我希望能够完成同样的事情。我只能弄清楚如何创建一个行图，如in my 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

Answer 2

用于生成堆叠条形图的JavaScript代码根本不使用DC.js。它只使用D3.js.这可以从app.min.js的美化转换中看出;这两个函数中的一个（或两个）是生成堆叠条形图的函数：

G = function(e, t) { 
     var r = (o - 40)/t; 
     f = ""; 
     var a = d3.select("#categories-chart").append("svg").attr("height", 50).attr("width", o), 
      s = 0; 
     a.selectAll("rect").data(e).enter().append("rect").attr("category", function(e) { 
      return e.key 
     }).attr("x", function(e) { 
      var t = s, 
       a = Math.floor(r * e.value); 
      return s += a, t 
     }).attr("y", 7).attr("width", function(e) { 
      var t = Math.floor(r * e.value); 
      return t 
     }).attr("height", 25).style("fill", function(e) { 
      return "" != e ? "" === f || f === e.key ? d3.rgb(i[e.key]) : d3.rgb(i[e.key]).darker(1.75) : void 0 
     }).on("click", function(e) { 
      f = e.key, d3.select("#categories-chart").select(".reset").style("display", null), m.filter(f).top(t), C(m, t), dc.renderAll() 
     }).on("mouseover", function() { 
      d3.select(this).style("cursor", "pointer") 
     }), $("rect").popover({ 
      container: "body", 
      trigger: "hover", 
      placement: "top", 
      content: function() { 
       return d3.select(this).attr("category") 
      } 
     }) 
    }, 
    C = function(e, t) { 
     var r = (o - 40)/t, 
      a = 0, 
      s = d3.select("#categories-chart"); 
     s.selectAll("rect").data(e).transition().duration(150).attr("x", function(e) { 
      var t = a, 
       s = Math.floor(r * e.value); 
      return a += s, t 
     }).attr("y", 7).attr("width", function(e) { 
      var t = Math.floor(r * e.value); 
      return t 
     }).attr("height", 25).attr("category", function(e) { 
      return e.key 
     }).style("fill", function(e) { 
      return "" != e ? "" === f || f === e.key ? d3.rgb(i[e.key]) : d3.rgb(i[e.key]).darker(1.75) : void 0 
     }), $("rect").popover({ 
      container: "body", 
      trigger: "hover", 
      placement: "top", 
      content: function() { 
       return d3.select(this).attr("category") 
      } 
     }) 
    }, 

正如你所看到的，没有DC.js.环顾其他地方，似乎没有DC.js本地解决方案。目前，您可能必须使用D3.js（例如jsFiddle）。

Answer 3

我没有发现任何API来创建DC.js叠排聊天，所以使用D3.js与https://www.dashingd3js.com/d3js-scales

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



var max_x = 700; //maximum width of the graph 
var height = 20; //maximum height 

var temp_x = 0 ; 
// calculating the quantity of all items 
for (var i = 0; i < items.length; i++) { 
    temp_x = temp_x + items[i].Quantity; 
} 


var svgContainer = d3.select("body").append("svg") 
            .attr("width", max_x) 
            .attr("height", height) 

var rectangles = svgContainer.selectAll("rect") 
          .data(items) 
          .enter() 
          .append("rect"); 
//temporary variable to mark start and end of an item. 
var start=0; 
var end=0; 
var end1=0; 
var rectangleAttributes = rectangles 
          .attr("x", function (d) { 
          // dynamically calculate the starting point of each item 
          start=end; 
          end=end+(d.Quantity * max_x)/temp_x; 
          return start; 
          }) 
          .attr("height", height) 
          .attr("width", function (d) { 
          //dynamically calculate the width of each item 
          end1=(d.Quantity * max_x)/temp_x; 
          return end1; }) 
          .style("fill", function(d) { return d.Name; }); 

HTML代码的帮助

<script src="https://rawgit.com/mbostock/d3/master/d3.js" charset="utf-8"> </script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" ></script> 
<div id="rowChart"></div> 

例如：http://codepen.io/anon/pen/vOXPBq?editors=101