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/

D3.js删除元素无法按预期工作

1 个答案: