D3中的中断出口过渡

Question

I've got a D3 force layout network with labeled links like this one . I've extended it so the exiting link labels have a fadeout effect. The exit code of the labels looks like this:

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

Now it's possible for a label to re-enter the layout while still fading/exiting (eg when quick successive mouseover and mouseout events occur on the same node). What happens is that the respective label is removed anyway because the event flow is like exit() -> transition() -> delay() -> enter() -> remove() .

What I need to do is to interrupt the transition of labels that re-enter the layout so the remove() function isn't called for them. Do you know a way how to do this?

Answer 1

By preparing the example I've actually found a possible solution. It works if I delete all currently fading/exiting labels before every update like this:

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

See the modified fiddle (in the updateLinkLabels() function). Maybe you know a more elegant solution?