javascript - d3js - 在 exit() 转换后节点不会被删除

Question

我有一个图表，其中随着时间的流逝动态创建节点。 一段时间后，我淡出节点并将它们移除。

我有两个变量:

• data_nodes 包含我将节点绑定(bind)到的数据

• node 是 d3.selectAll 的结果

我试过以下方法

node = svg.selectAll(".nodes")
    .data(data_nodes, function(d){return d.id;});

node.exit.remove();

这很好用。当我检查 SVG 时，节点被正确删除

但是当我这样做的时候

node = svg.selectAll(".nodes")
    .data(data_nodes, function(d){return d.id;});

node.exit().transition()
    .duration(duration+100)
    .style("opacity", 1e-6)
    .remove();

节点会按预期淡出，但不会从 SVG 元素中移除。 DOM 中圆圈元素的数量不断增加。

当我在控制台中检查 data_nodes 和 node 的大小时，它们符合我的预期，但是如果我执行

控制台中的 d3.selectAll(".nodes") 我可以看到数字是错误的。

感谢您的帮助。

解决方案:

看来我在 exit() 上的转换太长了，一些节点又回来了，因此在 enter() 上分配了一个转换。

Answer 1

将评论变成答案，因为这是问题所在:

您在第一次转换期间安排了另一个转换，这会取消删除。

来自 the docs :

If a newer transition is scheduled on any of the selected elements, these elements will not be removed; however, the "end" event will still be dispatched.