如何使用 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();

如何将此图表制作成堆叠式图表，其中每个部分为 'Red'、'White,' 或 'Blue' 并显示在一行中？

我的目标是拥有一个可以作为基础的工作示例。到目前为止的答案有所帮助，但我仍然无法构建它。

Answer 1

用于生成堆叠条形图的 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 2

我没有找到任何 api 从 DC.js 创建堆叠行聊天，所以在 https://www.dashingd3js.com/d3js-scales

的帮助下使用 D3.js

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

Answer 3

您可以使用 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

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

How to create stacked row chart with one row with dc.js?

javascript

d3.js

crossfilter

dc.js