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(); 
}