D3 transitions are exclusive and per-element. This typically means that you can’t run multiple transitions concurrently on the same elements; only the last-scheduled transition will run. However, since you can define custom tweens that run arbitrary code during transitions, you can decouple the transition’s element and the transition’s behavior if needed.
In this example, two transitions operate concurrently on the same path element. This works because the two transitions, twizzle and plonk, are created on dummy objects (twizzleLock
and plonkLock
, respectively) rather than the path element they manipulate.
An alternative approach is to schedule concurrent transitions on parent and child elements.