title: Progressive path animation in d3.js: how do I loop over individual elements of a d3 selection, for eg, each path segment of an area chart?
body: <p>I have <a href="http://dffrnt.com/d3.html" rel="nofollow">this small area chart demo</a> done in d3.js.</p>
  
  <p>I'm able to animate the chart <em>as a whole</em> but can't find a way to animate it piece-by-piece (I want it to be a proper animation, not a simple reveal using svg-clip). For example the code to animate the circles in the page linked above is just 2 simple lines that I've broken up here for clarity:</p>
  
  <pre><code>// start frame
  chart
      .selectAll( 'circle' )
      .data( data )
      .enter()
      .append( 'circle' )
      .attr( 'cx', function( d, i ) { return x( i ); })
      .attr( 'cy', y( 0 ) )
      .attr( 'class', 'point' ).attr( 'r', 5 );
  
  // end frame
  chart
      .selectAll( 'circle' )
      .data( data )
      .transition()
      .duration( 3000 )
      .attr( 'cx', function( d, i ) { return x( i ); })
      .attr( 'cy', function( d, i ) { return y( d ); });
  </code></pre>
  
  <p>The problem here is that <strong><em>all</em></strong> the circles start and finish at once. The same happens with the segments of the area chart. So how do I move them one after another? One way is to use d3's <code>delay</code> function;  I'm not sure how I would do this for the path segments of the area chart but for the circles marking the data points, it'd be something like this:</p>
  
  <pre><code>// start frame
  chart
      .selectAll( 'circle' )
      .data( data )
      .enter()
      .append( 'circle' )
      .attr( 'cx', function( d, i ) { return x( i ); })
      .attr( 'cy', y( 0 ) )
      .attr( 'class', 'point' ).attr( 'r', 5 );
  
  // end frame
  chart
      .selectAll( 'circle' )
      .data( data )
      .transition()
      .delay( 1000 * c )
      .duration( 3000 )
      .attr( 'cx', function( d, i ) { return x( i ); })
      .attr( 'cy', function( d, i ) { return y( d ); });
  </code></pre>
  
  <p>But to do this, I need <code>c</code>, the handle linking to individual circles one after the other, as if in a loop.</p>
  
  <p>So my questions are:</p>
  
  <ol>
  <li><p>How do I get <code>c</code>, the handle to an individual element of a
  selection, for the circles <strong><em>and</em></strong> for the area (svg.area()) chart?</p></li>
  <li><p>Is there a simpler way to achieve this than my <code>delay</code> approach?</p></li>
  </ol>