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);
})

我的问题如下：当我点击图表上的某个圆圈时，我希望将其删除。

据我所知，第一次点击时，click事件会返回正确的项目，然后从数据阵列中正确删除，但是当我使用新数据重新绑定图表时，会删除错误的圆圈。从那时起，错误的数据与所有其他圈子相关联。

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

非常感谢！

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。

使用D3在SVG圆上使用“单击”事件时，“单击”错误的项目

1 个答案: