中断D3中的退出转换

Interrupt exit transition in D3

本文关键字：退出 转换 D3 中断      更新时间：2023-09-26

我有一个D3 force布局网络与标签链接像这样的一个。我已经扩展了它，所以现有的链接标签有一个淡出效果。标签的退出代码如下所示:

$linkLabel.exit()
   .classed('fadeout', true)
   .transition()
   .delay(250)
   .remove();

现在标签可以在淡出/退出时重新进入布局(例如，当快速连续的鼠标悬停和鼠标离开事件发生在同一节点上时)。发生的情况是，无论如何，各自的标签被删除，因为事件流就像exit() -> transition() -> delay() -> enter() -> remove()。

我需要做的是中断重新进入布局的标签的过渡，因此不为它们调用remove()函数。你知道怎么做吗?

通过准备示例，我实际上已经找到了一个可能的解决方案。如果我在每次更新之前删除所有当前褪色/退出的标签，它就会起作用:

 $svg.selectAll('.link-label.fadeout').remove();

参见修改后的fiddle(在updateLinkLabels()函数中)。也许你知道一个更优雅的解决方案?

相关文章：