Как создать сложную диаграмму строк с одной строкой с dc.js?

Question

В DC.js github, Stock Market Selection Strategy by Lon Riesberg приведен в качестве примера использования библиотеки dc.js.

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

Как бы я сделать это многослойную диаграмму строки, где каждая секция 'Красный', 'Белый' или 'Blue' и отображается в одном ряд?

Моя цель - иметь рабочий пример, который я могу построить. Ответ до сих пор помог, но я до сих пор не смог его построить.

Answer 1

вы можете создать div с d3.js и добавить атрибут для 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

Edit

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