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

Question

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

const pieChart = dc.pieChart('#piechart');
const chart = dc.seriesChart('#chart');

const groupParameter = 'markdown';

const data = d3.csvParse(d3.select('pre#data').text());
data.forEach(d => {
  d.week = +d.week;
  d.markdown = +d.markdown;
});
const ndx = crossfilter(data);

const pieDimension = ndx.dimension(d => d.itemCategory);
const dimension = ndx.dimension(d => [d.itemCategory, d.week]);
const pieGroup = pieDimension.group().reduceSum(d => d[groupParameter]);
const group = dimension.group().reduceSum(d => d[groupParameter]);

pieChart
  .width(768)
  .height(480)
  .dimension(pieDimension)
  .group(pieGroup)
  .legend(dc.legend());

chart
  .width(768)
  .height(480)
  .chart(c => dc.lineChart(c).curve(d3.curveCardinal))
  .x(d3.scaleLinear().domain([27, 38]))
  .brushOn(true)
  .yAxisLabel(groupParameter)
  .yAxisPadding('5%')
  .xAxisLabel('Week')
  .elasticY(true)
  .dimension(dimension)
  .group(group)
  .mouseZoomable(true)
  .seriesAccessor(d => d.key[0])
  .keyAccessor(d => d.key[1])
  .valueAccessor(d => d.value)
  .legend(
    dc
      .legend()
      .itemHeight(13)
      .gap(5)
      .horizontal(1)
      .legendWidth(140)
      .itemWidth(70)
  );

chart.margins().left += 100;

dc.renderAll();

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

Answer 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);

fiddle 的新版本，dataCount 表明它现在可以正常工作：https://jsfiddle.net/gordonwoodhull/qga6z1yu/39/

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

现在，每次更改画笔时，这将应用滤镜四次！

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

Pie chart not updating properly when using brush in series chart

d3.js

crossfilter

dc.js