d3.js chained transitions

d3.js Chained Transitions

The post shows you different ways that you can implement d3.js chained transitions.

Default transitions

d3.js offers great built-in transition() API to allow simple animations, so we can animate positions, sizes very easily like this:

Chained transitions, element by element

However, things get complicated when we want to chain animations, i.e. run animations in sequence, one after another.

d3.js offers built-in  transition.each([type, ]listener)  in API which allows us to chain transitions for individual elements, i.e triggering another transition after the previous element has finished transition:

There are also examples (another) on how to use this type of d3.js chained transitions by Mike Bostock.

Chained transitions, transition by transition

However, what if I want to chain another transition after all the elements in the first transition has finished transition?

In the example below, we chain the transitions such that the transition of sizes only occur after all the positions have completed their transitions.

This effect can be achieved with the help of a small utility function endall:

With this function, we can trigger then the second transition only after all the queued animations in the first transition has ended:

So, now we have three different ways to do a transition in d3.js:

  • All transitions together simultaneously (default behavior)
  • Transitions are chained one element after another
    • using  transition().each("end", myCallback);
  • Transitions are chained one transition after another
    • using endall utility function

Hope this post helps people experimenting with transitions and animations using d3.js!

Leave a Reply