dc.js 多图与范围图交互 - 设置过滤器时饼图为空答案

【问题标题】：dc.js multichart interaction with range chart - pie chart goes empty when filter setdc.js 多图与范围图交互 - 设置过滤器时饼图为空
【发布时间】：2019-08-21 15:27:02
【问题描述】：

我设置了一个小型 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();

【问题讨论】：

标签： dc.js crossfilter

【解决方案1】：

虽然它是几年前推出的，但seriesChart 仍然处于领先地位，并且某些功能无法正常工作。

问题在于维度键 ([+d.Expt, +d.Run]) 与图表应用的过滤器不一致，这些过滤器仅是 RangeFilters 超过 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;
}

使问题更加复杂的是，复合图表不仅会在父级别应用过滤器，还会在每个子级应用过滤器。所以我们需要修补很多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.

请注意，无论您选择什么，切片的大小始终相同。因此，演示中唯一很酷的地方是当您选择某些内容时饼图不会变为空白。

【讨论】：