Concurrent Transitions
Two concurrent D3 transitions animate a single SVG path element rendered as a black cross with a red outline. The *twizzle* transition continuously rotates the path 720 degrees, while the *plonk* transition repeatedly pulses its red stroke-width between 0 and 30 pixels. The code achieves concurrency by running each `transition.tween` on separate dummy objects (`twizzleLock` and `plonkLock`) instead of the path itself, using `d3.interpolateString` to drive the custom tweens and `setTimeout` for looping.
AI-generated descriptionD3 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.