d3 v4 + react + es6 + crossfilter：Selection.exit（）。remove（）不起作用

Question

我使用和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

我怀疑问题是2件事之一。可能是＃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(); 
}