Làm cách nào để tạo biểu đồ hàng xếp chồng lên nhau với một hàng có dc.js?

Question

Trên DC.js github, Stock Market Selection Strategy by Lon Riesberg được liệt kê làm ví dụ về cách sử dụng thư viện dc.js.

Lon có thể tạo biểu đồ hàng xếp chồng và hiển thị nó dưới dạng một hàng.

Tôi muốn có thể thực hiện được điều tương tự. Tôi chỉ có thể tìm ra cách tạo biểu đồ hàng, như được hiển thị in my codepen và bên dưới.

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(); 

Làm thế nào tôi có thể làm điều này một biểu đồ hàng xếp chồng lên nhau trong đó mỗi phần là 'Red', 'trắng', hoặc 'Blue' và được hiển thị trong một hàng?

Mục tiêu của tôi là có một ví dụ hoạt động mà tôi có thể xây dựng. Câu trả lời cho đến nay đã giúp, nhưng tôi vẫn chưa thể xây dựng được điều này.

Answer 1

bạn có thể tạo div với d3.js và thêm thuộc tính cho 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) + ';' 
     ) 
    }) 

Kiểu attr.style có thể cải thiện.

Bạn có thể thêm tiền tố cho webkit

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

Sửa

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

Answer 2

Mã javascript được sử dụng để tạo biểu đồ thanh xếp chồng lên nhau đó hoàn toàn không sử dụng DC.js. Nó chỉ sử dụng D3.js. Điều này có thể được nhìn thấy từ một chuyển đổi đẹp mắt của app.min.js; một (hoặc cả hai?) của các chức năng này là những người sản xuất biểu đồ thanh xếp chồng đó:

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") 
      } 
     }) 
    }, 

Như bạn thấy, không có DC.js. Nhìn xung quanh nơi khác, có vẻ như không phải là giải pháp gốc của DC.js cho điều này. Hiện tại, bạn có thể phải sử dụng D3.js (ví dụ: jsFiddle).

Answer 3

tôi không tìm thấy bất kỳ api để tạo xếp chồng lên nhau trò chuyện hàng từ dc.js, vì vậy sử dụng D3.js với sự giúp đỡ của 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; }); 

mã 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> 

dụ: http://codepen.io/anon/pen/vOXPBq?editors=101