点击错误的项目使用"点击"事件在SVG圆圈上使用D3

Wrong item "clicked" when using the "click" event on a SVG circle using D3

本文关键字：quot SVG D3 事件 错误 点击 项目      更新时间：2023-09-26

我正在学习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);
})

我的问题是:当我点击图表上的一个圆圈时，我希望它被删除。

据我所知，在第一次单击时，单击事件返回正确的项，然后从数据数组中适当地删除，但是当我用新数据重新绑定图表时，删除了错误的圆。从那一刻起，错误的数据与所有其他圆圈联系在一起。

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

多谢!

没有更新删除后保留的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();
}

更新小提琴。

相关文章：