Question

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

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

使用带有DC.js的分组栏

1 个答案: