d3 v4 + react + es6 + crossfilter：Selection.exit().remove() 不起作用

Question

我将crossfilter.js 和d3.js v4 与ES6 风格的React 一起使用，以尝试使用上下文刷来制作维度图表。本质上，我采用了this example 并将其转换为 ES6。

我遇到的问题是selection.exit().remove() 无法正常工作，因此在每次重绘时，svg g 元素会附加越来越多的圆圈。创建画笔时会触发重绘。我通过运行检查了

selection.exit()
  .attr('class', d => {
    console.log('anything');
    return 'anything';
  })
  .remove();

但没有输出任何内容，所以我认为我的数据选择无效。

这里是上下文：

componentDidMount() {
  const el = ReactDOM.findDOMNode(this); // the mounted svg element

  const svg = d3.select(el)
    .attr('width', 300)
    .attr('height', 500);

  const g = svg.append('g')
    .attr('transform', 'translate(32,32)');

  let circles = g.append('g')
    .selectAll('circle');

  const brushGroup = g.append('g')
    .attr('class', 'brush')
    .call(brush);

  function redraw() {
    const all = group.all(); // crossfilter group returns an array

    xAxisGroup.call(xAxis);
    yAxisGroup.call(yAxis);

    circles = circles.data(all, d => d); // keyFn for data constancy

    circles.enter().append('circle')
      .attr('r', radius)
      .attr('cx', plotX) // radius + plotX/Y are simple curry functions
      .attr('cy', plotY);

    circles.exit().remove(); // not working!!
  }

  redraw();
}

我也知道 v4 中 d3-selection 的这一变化，但我不太确定哪些行是我的update，哪些行是我的update + enter。

任何帮助将不胜感激。谢谢！

Answer 1

我怀疑问题是两件事之一。可能是下面的#1。如果没有一个工作示例来测试它，这有点难以判断，但是你去吧：

1. 我相信selectAll 和data 连接应该在redraw 函数中一起发生。因为您永远不会在重绘函数中重做selectAll，所以您的选择将永远不会包含任何元素。如果您在redraw 函数中检查您的enter 和exit 选择，您的enter 选择将始终包含您的所有数据点，因为基础选择是空的。

2. 您的数据键函数返回一个对象。由于对象是 Crossfilter 的 group.all 的结果，因此它们应该可以通过引用进行比较，但使用 circles.data(all, d => d.key) 会更安全。

解决方案应该是：

componentDidMount() {
  const el = ReactDOM.findDOMNode(this); // the mounted svg element

  const svg = d3.select(el)
    .attr('width', 300)
    .attr('height', 500);

  const g = svg.append('g')
    .attr('transform', 'translate(32,32)');

  let circlesGroup = g.append('g'); // Just hang on to the group

  const brushGroup = g.append('g')
    .attr('class', 'brush')
    .call(brush);

  function redraw() {
    const all = group.all(); // crossfilter group returns an array

    xAxisGroup.call(xAxis);
    yAxisGroup.call(yAxis);

    let circles = circlesGroup // Do the selection and data join here
      .selectAll('circle')
        .data(all, d => d.key); // Have the key function return a key, not an object

    circles.enter().append('circle')
      .attr('r', radius)
      .attr('cx', plotX) // radius + plotX/Y are simple curry functions
      .attr('cy', plotY);

    circles.exit().remove();
  }

  redraw();
}