在系列图中使用画笔时饼图无法正确更新

时间:2018-07-19 11:49:15

标签: d3.js dc.js crossfilter

我有1个饼图和1个带画笔的系列折线图。目前,当我刷饼图时会更新,但是无论选择的范围如何,都会显示相同的结果。如何使画笔正常工作?

SECTIONS

https://jsfiddle.net/qwertypomy/L37d01e5/#&togetherjs=HF15j0M5pH

1 个答案:

答案 0 :(得分:1)

看起来似乎没有为序列图正确实施过刷涂。

问题在于,序列图的维键是二维数组,但是应用了普通的RangedFilter,它不理解这些键。

您可以手动应用过滤器处理程序,该处理程序将查看键的右侧部分:

chart.filterHandler(function(dimensions, filters) {
  if (filters.length === 0) {
    dimension.filter(null);
  } else {
    var filter = dc.filters.RangedFilter(filters[0][0], filters[0][1]);
    dimension.filterFunction(function(k) {
      return filter.isFiltered(k[1]);
    });
  }
  return filters;
});

实际上,我不确定是否有解决此问题的优雅方法。我已经开始跟踪该问题:https://github.com/dc-js/dc.js/issues/1471

编辑:除非将其同时应用于序列图及其所有子项,否则此方法无效。效率极低,但就像这样:

function filterHandler(dimensions, filters) {
  if (filters.length === 0) {
    dimension.filter(null);
  } else {
    var filter = dc.filters.RangedFilter(filters[0][0], filters[0][1]);
    dimension.filterFunction(function(k) {
      return filter.isFiltered(k[1]);
    });
    console.log('all',all.value());
  }
  return filters;
}
chart
  .chart(c => dc.lineChart(c).curve(d3.curveCardinal).filterHandler(filterHandler))
  .filterHandler(filterHandler);

小提琴的新版本,其中dataCount表示它正在工作:https://jsfiddle.net/gordonwoodhull/qga6z1yu/39/

我们确实需要https://github.com/dc-js/dc.js/pull/682的通用版本,才能在共享相同维度的多个图表之间以协作的方式仅应用一次过滤器。

现在,这将在每次笔刷更换时应用滤镜四次!