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.Run之间。

(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;
}

解决此问题的方法是，合成图不仅将过滤器应用于父级，而且还将应用于每个子级。因此，我们需要修补很多filterHandler才能使它起作用。

我们还必须将此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.

请注意，无论您选择什么，切片都将始终具有相同的大小。因此，该演示中唯一很酷的事情是选择某些内容时饼图不会空白。