title: D3.js chain transitions for compound animations for different shapes
body: <h3>What I'm trying to do...</h3>
  
  <p>I'm toying with D3 to make a compound animation. I have the following final state:</p>
  
  <p><img src="https://i.stack.imgur.com/f2zCe.png" alt="enter image description here"></p>
  
  <p>Essentially I want to animation connecting the dots - add the first <em>circle</em>. Then draw the <em>line</em> to the second circle. Once the line is drawn, the second circle is added.</p>
  
  <p>To add some visual appeal, I perform other transitions, such as changing <em>circle</em> radius for the first and second circle as the line is draw.</p>
  
  <h3>What I've tried...</h3>
  
  <p>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.</p>
  
  <p>I've <a href="http://blog.visual.ly/creating-animations-and-transitions-with-d3-js/">read about transitions/animations</a>, which suggests using <code>each("end")</code>. While this would work to draw the initial objects, end doesn't fire until after the other transitions.</p>
  
  <h3>Questions</h3>
  
  <ul>
  <li>Is using <code>each("end", ...)</code> the correct approach for chaining transitions?</li>
  <li>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).</li>
  </ul>