D3.selectAll(...).transition() Explained

I hope this sequel will help you to understand how a d3-transition works, specifically when it is applied on multiple elements.

The main objective of this sequel is to illustrate that:

• selectAll(...).transition() defines several transitions
• each transition runs independantly

This sequel also illustrates:

• the use of transition().delay(...), transition().duration()
• the lifecycle of a transition (scheduled/starting/running/ending/stopped)

This sequel uses D3 v3.5.5.

If you look at the code, you will see that:

• I use named transition in order to run several transition on the same element
• I stop running transitions by overriding the adequate named transitions