时间戳

首页 > 解决方案 > 在系列图中使用画笔时饼图未正确更新

d3.js - 在系列图中使用画笔时饼图未正确更新

问题描述

我有 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

标签： d3.jsdc.jscrossfilter

解决方案

对于系列图表，似乎从未正确实施过刷牙。

问题是系列图表的维度键是二维数组，但应用了普通的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

编辑：这不起作用，除非它同时应用于系列图表及其所有 children。非常低效，但就像这样：

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以在共享相同维度的多个图表之间以协作的方式仅应用一次过滤器。

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

推荐阅读