使用带 DC.js 的分组条

Question

我使用 grouped bar PR of dc.js and the corresponding grouped bar chart example 作为基准。

出于某种原因，我必须在数据中使用数字而不是字符串。（将 "male" 和 "female" 转换为 1/0）。我猜这与我正在使用的 reduce 函数有关。当然，这也会影响我的 x 轴标签。我宁愿他们显示文本变体。

ndx = crossfilter(eData),
groupDim = ndx.dimension(function(d) {return d.service;}), 
qtySumGroup = groupDim.group().reduce(
    function(p,v) { p[v.component] = (p[v.component] || 0) + v.qty; return p; }, 
    function(p,v) { p[v.component] = (p[v.component] || 0) - v.qty; return p; }, 
    function() { return{}; });

我还注意到它似乎没有交叉过滤数据。当我单击一组中的一个条形图时，它不会过滤页面上的其他图表。我错过了什么？

Answer 1

这是答案的第一部分。为了使用字符串 components/genders 进行分组，您需要调整 select 为 "stacking" 编辑数据的方式（实际上是在使用此版本的 dc.js 时进行分组） .

因此，您可以通过先遍历数据并抓取组件来抓取组件名称：

  var components = Object.keys(etsData.reduce(function(p, v) {
      p[v.component] = 1;
      return p;
  }, {}));

这将构建一个对象，其中的键是组件名称，然后仅将键作为数组提取。

然后我们使用 components 到 select 类别，如下所示：

grpChart
        .group(qtySumGroup, components[0], sel_stack(components[0]));

for(var i=1; i<components.length; ++i)
    grpChart.stack(qtySumGroup, components[i], sel_stack(components[i]));

这和原来的一样

grpChart
        .group(qtySumGroup, "1", sel_stack('1'));

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

除了它是按字符串而不是整数索引。

我知道这不是您问题的重要部分，但不幸的是 filtering by stack segments is not currently supported in dc.js。如果我有时间，我会在今天晚些时候尝试 return 到那部分 - 应该可以通过使用带有复合键的维度（或使用二维）和自定义点击事件来破解它，但我没有'还没有人尝试过这个。

添加到 dc.js 中无疑是一个有用的功能，即使只是作为外部定制。

编辑：我添加了 an example of filtering the segments of a stack, which should apply equally well for grouped bars (although I haven't tried it with your code). The technique is explained in the relevant dc.js issue。

使用带 DC.js 的分组条

Using Grouped Bars with DC.js

dc.js