dc.js与范围图表的多重交互 - 当过滤器设置时，饼图变为空白

Question

我已经设置了一个小的dc.js仪表板，其中的饼图表示要选择的不同实验，一个表示实验结果的系列图表，以及结果的相关范围图表。范围图正确更新系列图表，同样，饼图正确更新系列图表。但是，范围图表和饼图似乎不希望彼此玩得很好。当我设置过滤范围图表中的范围时，饼图变为空白。

我在这里做了一个jsfiddle：https://jsfiddle.net/nwhite/zb1xf0cu/132/

理想情况下，我可以使用饼图选择2个左右的实验，然后使用范围图表放大感兴趣的区域。但是当我应用范围过滤器时，饼图会消失。

系列图表和范围图表都使用相同的维度（runDimension）和组（runGroup），而饼图使用exptDimension和exptGroup：

ndx = crossfilter(experiments);
runDimension = ndx.dimension(function(d) {return [+d.Expt, +d.Run]; });
runGroup = runDimension.group().reduceSum(function(d) { return +d.Speed; });

exptDimension = ndx.dimension(function(d) {return +d.Expt; });
exptGroup = exptDimension.group();

Answer 1

虽然几年前它被引入，但seriesChart仍处于前沿，而且一些功能无法正常工作。

问题是维度键（[+d.Expt, +d.Run]）与图表适用的过滤器不一致，它们仅仅是RangeFilter上的d.Runs。

(Here's the issue on GitHub.)

它不如真正的RangedFilter有效，但我们可以定义一个过滤器处理程序，它与这个维度使用的复合键相对应，并检查第二部分（通过keyAccessor）是否在该范围内：

function seriesFilter(dimensions, filters) {
  if (filters.length === 0) {
    runDimension.filter(null);
  } else {
    var filter = dc.filters.RangedFilter(filters[0][0], filters[0][1]);
    runDimension.filterFunction(function(k) {
      return filter.isFiltered(rangeChart.keyAccessor()({key: k, value: null}));
    });
  }
  return filters;
}

使问题更加复杂，复合图表将不仅在父级别而且在每个子级内应用其过滤器。因此我们需要修补相当多的filterHandlers才能使其正常工作。

我们必须将这个filterHandler应用于焦点图表，范围图表以及他们所有的孩子！

rangeChart.filterHandler(seriesFilter);
seriesChart.filterHandler(seriesFilter);
rangeChart
    // ...
    .chart(function(c) { return dc.lineChart(c).curve(d3.curveCardinal).filterHandler(seriesFilter); })
// same with seriesChart

Working fork of your fiddle.

请注意，无论您选择什么，切片的大小始终相同。因此，演示中唯一很酷的事情就是当你选择某些东西时，饼图不会变成空白。