D3.js移除元素不能按預期工作

Question

我正在構建一個流行的腦筋急轉彎的可視化。到目前爲止，SVG上有9個球具有拖曳行爲，碰撞檢測和forceY。

我想通過拖動刪除它們。哪些工作...但不是它應該的方式。

其中一個球是黃色的。當它被拖動時，它應該被刪除。這有效，但錯誤是另一個球變黃。

這是處理功能的函數，下面是小提琴。

function dragended(d, i) { 
    balls.splice(i, 1); 

    var update = svgBalls.data(balls) 
    update.exit().remove() 

    simulation.alphaTarget(0.1); 

} 

http://jsfiddle.net/Anuar/21738t3g/

Answer 1

這是不在這個詞的狹義的解決方案，而只是你的問題的解釋。

如果我們稍微改變你的數據陣列...

var balls = [{id:0, color:false},{id:1, color:false},{id:2, color:false}, 
    {id:3, color:false}, {id:4, color:false}, {id:5, color:false}, 
    {id:6, color:false}, {id:7, color:false},{id:8, color:false}]; 

......在我們可以設置一個鍵功能這樣的方式......

svgBalls.data(balls, d => d.id) 

...你」你會看到這一行：

balls.splice(i, 1); 

是否正確刪除拖動的元素。如果你改變這個：

balls = balls.filter(d => d.id != i); 

它會工作。

這裏是你更新的小提琴：http://jsfiddle.net/27sykjxd/