Jak utworzyć skumulowany wykres wierszowy z jednym wierszem z dc.js?

Question

Na DC.js github, Stock Market Selection Strategy by Lon Riesberg jest wymieniony jako przykład korzystania z biblioteki dc.js.

Lon był w stanie utworzyć ułożoną tablicę wierszy i wyświetlić ją jako pojedynczy wiersz.

Chciałbym, aby móc osiągnąć to samo. Mogłem tylko dowiedzieć się, jak utworzyć wykres wierszy, jak pokazano poniżej i poniżej.

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

Jak bym zrobić to skumulowany wykres wiersza, w którym każda sekcja jest 'Red', 'White' lub 'Blue' i jest wyświetlany w jednym rząd?

Moim celem jest mieć działający przykład, na którym mogę się oprzeć. Odpowiedź na to pytanie pomogła, ale nadal nie udało mi się tego zbudować.

Answer 1

możesz utworzyć div z d3.js i dodać atrybut 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 mogłyby poprawić.

Możesz dodać przedrostek dla WebKit

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

Edycja

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

Answer 2

Kod javascript użyty do utworzenia tego wykresu słupkowego nie korzysta w ogóle z DC.js. Używa tylko D3.js. Widać to z upiększonej konwersji app.min.js; jedna (lub obie?) z tych funkcji to te, które produkują ten wykres słupkowy:

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

Jak widać, brak DC.js. Rozglądając się w innym miejscu, wydaje się, że nie jest to natywne rozwiązanie DC.js. Na razie może być konieczne użycie D3.js (np. jsFiddle).

Answer 3

nie mogę znaleźć żadnych API do tworzenia wierszy ułożone czat z dc.js, więc używany D3.js z pomocą 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; }); 

kod 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> 

przykład: http://codepen.io/anon/pen/vOXPBq?editors=101