如何使用dc.js创建堆叠的条形图？

Question

我想使用DC.JS创建堆积的条形图。

我试图利用DC.JS的文档（图形，源代码）毫无用处-以下是我的尝试（这是我在jsfiddle中的尝试）和我最近在CodePen中的尝试。

我想将“名称”作为X轴并将“类型”作为堆栈。

的HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"></script>
<script src="https://cdnjs.site44.com/dc2.js"></script>
<div id="chart"></div>

Java脚本

var data = [ {"Name":"Abby","Type":"Apple"}, {"Name":"Abby","Type":"Banana"}, {"Name":"Bob","Type":"Apple"} ]

data.forEach(function(x) {
  x.Speed = +x.Type;
});

var ndx = crossfilter(data)

var xdim = ndx.dimension(function (d) {return d.Name;});

function root_function(dim,stack_name) {
    return dim.group().reduce(
  function(p, v) {
    p[v[stack_name]] = (p[v[stack_name]] || 0) + v.Speed;
    return p;}, 
  function(p, v) {
    p[v[stack_name]] = (p[v[stack_name]] || 0) - v.Speed;
    return p;}, 
  function() {
    return {};
  });}

var ydim = root_function(xdim,'Type')

function sel_stack(i) {
return function(d) {
  return d.value[i];
};}

var chart = dc.barChart("#chart");

chart
  .x(d3.scale.ordinal().domain(xdim))
  .dimension(xdim)
  .group(ydim, "1", sel_stack('1'))
  .xUnits(dc.units.ordinal);

for(var i = 2; i<6; ++i)
  chart.stack(ydim, ''+i, sel_stack(i));

chart.render();

我已经对此摆弄了一段时间，还有一些其他发现：

• 当我用以下内容替换数据数组时，它可以工作

  数据= [{“名称”：“ Abby”，“类型”：“ 1”}，{“名称”：“ Abby”，“类型”：“ 2”}，{“名称”：“鲍勃”，“类型“：” 1“}]

• 但是它仅在我将dc 1.7.5（https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.min.js）和dc 2.1.0-dev（https：/ /github.com/dc-js/dc.js/blob/develop/web/js/dc.js）

• 但是，当我用以下内容替换数据数组时，它不起作用：

  数据= [{“名称”：“ Abby”，“类型”：“ 3”}，{“名称”：“ Abby”，“类型”：“ 4”}，{“名称”：“鲍勃”，“类型“：” 2“}]

我相信根本问题在于root_function。

Answer 1

v.Speed始终NaN是您当前的示例。因为+x.Type尝试将“ Apple”之类的字符串转换为数字并失败。如果您只想计数，则1在化简器中加减，而不是v.Speed。当然，您需要更新sel_stack代码和图表代码以处理此更改。

这是数据中两种类型的工作示例。您可能必须更新它以处理任意数量的类型，可能是通过预先构建所有类型的数组，然后循环遍历以将堆栈添加到图表中：http : //codepen.io/anon/pen/GjjyOv编辑者= 1010

var data = [ {"Name":"Abby","Type":"Apple"}, {"Name":"Abby","Type":"Banana"}, {"Name":"Bob","Type":"Apple"} ]

var ndx = crossfilter(data)

var xdim = ndx.dimension(function (d) {return d.Name;});

在减速器中，只需加减1即可计数：

var ydim = xdim.group().reduce(
  function(p, v) {
    p[v.Type] = (p[v.Type] || 0) + 1;
    return p;}, 
  function(p, v) {
    p[v.Type] = (p[v.Type] || 0) - 1;
    return p;}, 
  function() {
    return {};
  });

sel_stack不再使用数字，而是一个密钥：

function sel_stack(valueKey) {
return function(d) {
  return d.value[valueKey];
};}

var chart = dc.barChart("#chart");

出于示例的目的，在此我们对堆栈键进行硬编码：

chart
  .x(d3.scale.ordinal().domain(xdim))
  .dimension(xdim)
  .group(ydim, "Apple", sel_stack('Apple'))
  .xUnits(dc.units.ordinal);

同样，另一个硬编码的堆栈键。创建包含所有堆栈值的某种数据结构后，您需要重新创建循环。

//for(var i = 2; i<6; ++i)
  chart.stack(ydim, 'Banana', sel_stack('Banana'));

chart.render();