What I'm trying to do...
I'm toying with D3 to make a compound animation. I have the following final state:
Essentially I want to animation connecting the dots - add the first circle. Then draw the line to the second circle. Once the line is drawn, the second circle is added.
To add some visual appeal, I perform other transitions, such as changing circle radius for the first and second circle as the line is draw.
What I've tried...
I can add the circles and draw the line individually, including animations. However, I'm not sure how to proceed with chaining the transitions together to form the compound animation.
I've read about transitions/animations, which suggests using each("end")
. While this would work to draw the initial objects, end doesn't fire until after the other transitions.
Questions
- Is using
each("end", ...)
the correct approach for chaining transitions? - How do I start another animation (i.e. start draw the line) while still allowing another transition to complete (i.e. the first circle radius burst).