title: Using setTimeout to delay d3 transition
body: <p>I am trying to create a simple plane animation along a spiral curve</p>
  
  <p>However, I encountered issue when trying to delay the transition using d3's delay function, the animation does not seem to go correctly</p>
  
  <p>So I have been contemplating using setTimeout to delay the triggering of the transition function, but could not seem to get it right. Could someone give me a suggestion?</p>
  
  <p><a href="http://jsfiddle.net/duck0/66u12oxv/14/" rel="nofollow">Link to the fiddle</a>. This includes the original transition without setTimeout or any .delay; v15 shows the error with using .delay; and v16 has what I have tried with setTimeout</p>
  
  <p>This is my code for transitioning without setTimeout (which works fine without .delay)</p>
  
  <pre><code>function transitionThis(d,i) {
  d3.select(this).transition()
  .duration(3000)
  //.delay(3000) //causes error in the animation
  .ease("exp")
  .each("start", function() { d3.select(this).style("opacity", "1"); })    
    .attrTween("transform", translateAlong(path.node()))
    .styleTween("opacity", function () {return d3.interpolate("1", "0");});}
  
  plane.each(transitionThis);
  
  // Returns an attrTween for translating along the specified path element.
  function translateAlong(path) {
    var l = path.getTotalLength();
      var t0 = 0;
      return function(i) {
    return function(t) {
      var p0 = path.getPointAtLength(t0 * l);//previous point
      var p = path.getPointAtLength(t * l);////current point
      var angle = Math.atan2(p.y - p0.y, p.x - p0.x) * 180 / Math.PI;//angle for tangent
      t0 = t;
    return "translate(" + p.x + "," + p.y +  ")scale(" + (0.2+t*4) + ")rotate(" + angle +"15"+")";
  };
    };
  }
  </code></pre>
  
  <p>and this is my attempt at adding setTimeout </p>
  
  <pre><code>function transitionThis(d,i) {
  d3.select(this).transition()
  .duration(3000)
  //.delay(3000) //causes error in the animation
  .ease("exp")
  .each("start", function() { d3.select(this).style("opacity", "1"); })    
    .attrTween("transform", translateAlong(path.node()))
    .styleTween("opacity", function () {return d3.interpolate("1", "0");});
  }
  
  function delayedFlight() {
  var tOut = setTimeout(transitionThis(),3000);
  }
  plane.each(delayedFlight);
  </code></pre>