javascript - 使用 D3 在 SVG 圆上使用 "clicked"事件时出现错误项目 "click"

Question

我正在学习 D3，在使用 D3 和 SVG 创建图表时遇到了问题。完整的代码(但包含真实数据的子集)可以在这里找到: http://jsbin.com/lemazefa/1/edit .

可以在此处找到简化示例:http://jsfiddle.net/antoinejaussoin/G7zms/(这是一个更好的方法，因为它删除了问题周围的所有不必要的代码)。

.on('click', function(d, i){
console.log('I have clicked on '+d);
data.splice(i, 1);
console.log('Data is now: '+data);
update(data);
})

我的问题如下:当我单击图表上的一个圆圈时，我希望将其删除。

据我所知，第一次单击时，单击事件返回正确的项目，然后从数据数组中正确删除，但是当我用新数据重新绑定(bind)图表时，错误的圆圈被删除。从那一刻起，错误的数据就与所有其他圈子相关联了。

知道为什么会这样吗？这是D3的bug吗？或者更有可能的是，我做错了什么吗？

非常感谢!

Answer 1

您没有更新删除后保留的 DOM 元素的属性。这是因为您正在设置输入选择的属性，该选择在初始附加后始终为空。

因此，将代码更改为:

    function update(data) {
    var circle = svg.selectAll("circle")
        .data(data);

    // enter selection
    circle.enter()
        .append("circle")
        .on('click', function (d, i) {
            console.log('I have clicked on ' + d);
            data.splice(i, 1);
            console.log('Data is now: ' + data);
            update(data);
        })

    // update selection
    circle.attr("fill", "steelblue")
        .attr("cy", 90)
        .attr("cx", function (d) {
            return d;
        })
        .attr("r", Math.sqrt);

    // exit selection
    circle.exit().remove();
}

已更新FIDDLE .