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