title: Need pauses - timing not working on iterating through text strings w/ d3/svg (piling up on each other)
body: <p>I am trying to use d3 to animate text using an svg text with d3 transitions. I have it working as desired for a single string.</p>
  
  <p>I want to iterate through strings from an array of json objects. </p>
  
  <p>I can do this as well.</p>
  
  <p>All the painting and transitions work great. Problem is, they all happen at once, and appear piled up on each other, and all animate all at once.</p>
  
  <p>I have tried putting them in a setTimeout() to get them to appear sequentially.</p>
  
  <p>Still does not work.</p>
  
  <p>for ( i in haikuStr ) { </p>
  
  <pre><code>if( i !=0 ){
   //Make it wait if an appropriate time it is not the first one
       setTimeout( function() {
       showText();
   }, 11000 * i );
  } else {
       //if i=0, don't make folks wait
      showText();
  }
  </code></pre>
  
  <p>}</p>
  
  <p>The showText() function is the full create container -> finish transitions.</p>
  
  <p>I use 11000 * i to ensure that >2 iterations have 11 additional seconds per i.</p>
  
  <p>I have spent quite a bit of time reading and trying to figure out how to get the loop to pause before cycling through to paint the next line.</p>
  
  <p>Any thoughts or ideas would be appreciated.</p>
  
  <p>The un-timed example is here, if you wish to see the text jumble up:</p>
  
  <p><a href="http://www.mysalmagundi.com/js/svg-d3-no-timing.html" rel="nofollow">http://www.mysalmagundi.com/js/svg-d3-no-timing.html</a></p>