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/