将分组条与 DC.js 一起使用

Question

我使用grouped bar PR of dc.js 和相应的grouped bar chart example 作为基线。

出于某种原因，我必须在数据中使用数字而不是字符串。 （将“男性”和“女性”转换为 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

这是答案的第一部分。为了使用字符串组件/性别进行分组，您需要调整为“堆叠”选择数据的方式（实际上是在使用此版本的 dc.js 时进行分组）。

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

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

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

然后我们使用components 来选择这样的类别：

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。如果我有时间，我将在今天晚些时候尝试返回该部分 - 应该可以使用带有复合键（或使用二维）的维度和自定义点击事件来破解它，但我还没有看到有人尝试这还。

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

编辑：我添加了an example of filtering the segments of a stack，它应该同样适用于分组条（尽管我没有用你的代码尝试过）。技术是explained in the relevant dc.js issue。