javascript-d3js-退出()过渡后节点不会被移除

我有一张图表,其中随着时间的流逝动态创建节点.
一段时间后,我淡出节点并将其删除.

我有2个变量：

> data_nodes包含将节点绑定到的数据
>节点,这是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()上分配了过渡.

解决方法:

将评论变成答案,因为这是问题所在：

您将在第一个过渡期间安排另一个过渡,这将取消删除.

从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.

标签：svg,d3-js,javascript
来源： https://codeday.me/bug/20191121/2051389.html