dorjeduck
dorjeduck

Reputation: 7794

d3.js - transition interruption event?

I was wondering how to handle the fact that an interrupted transition within d3.js does not trigger an end event. As the API doc says

Note that if the transition is superseded by a later-scheduled transition on a given element, no end event will be dispatched for that element; interrupted transitions do not trigger end events. from: https://github.com/mbostock/d3/wiki/Transitions#control

In my case transitions are triggered by user interaction. These transitions might be interrupted when the user triggers a new transition through mouse click. Let's say in the first transition an element was meant to fade out and be removed at the end of the transition. If this transition is interrupted the element will never be removed. I could disallow further user interaction during the time a transition happens yet that is not really what I want (particular as i have back and forward buttons which allow the user to click through previous states of my svg graph quickly ... ) Basically I would need an "Interruption Event"

Thanks

martin

Upvotes: 3

Views: 590

Answers (1)

juho
juho

Reputation: 41

I think there is no really satisfactory way to do this. A little bit painful workaround would be counting the number of transitions currently taking place and reasoning from that.

So, initialize:

var transitionCount = 0;

And whenever you schedule new transitions:

if ( transitionCount != 0 ) {
    // handle interrupted transitions here somehow
    transitionCount = 0;
}
var myTransition = selection.transition().... ; 
transitionCount += myTransition.size();
myTransition.each('end', function() { transitionCount --; });

If you can handle manually cleaning up interrupted transitions like this, this would be fine. Notice, that you can't use 'start' events to increment the counter as there is a delay between scheduling a transition and it being started so you'd get a race condition there.

Upvotes: 1

Related Questions