title: moving a circle along a d3 path animating at varying speeds
body: <p>I really found this question and answer helpful on how to get a line animate at varying speeds.</p>
  
  <p><a href="https://stackoverflow.com/questions/17843494/changing-speed-of-d3-path-animation">Changing speed of D3 path animation</a></p>
  
  <p>Which pointed to this block:
  <a href="http://bl.ocks.org/explunit/6082362" rel="nofollow noreferrer">http://bl.ocks.org/explunit/6082362</a></p>
  
  <p>I've been following this and would like to add an circle which moves along the start of the line. 
  I've added a marker</p>
  
  <pre><code>    var marker = g.append("circle")
      .attr("r", 7)
      .attr("id", "marker")
  </code></pre>
  
  <p>but for the life of me I can't get it to follow along the line, at the same speed. </p>
  
  <p>I've added this bit to the end of that block</p>
  
  <pre><code>var p = path.node().getPointAtLength(lengthAt[i-1] );
  
      markerTransition = markerTransition.transition()
          .duration(lineData[i].speed)
          .ease('linear')
          .attr("transform", "translate(" + p.x + "," + p.y + ")");
  </code></pre>
  
  <p>and now I have a moving circle, but it's not in sync with the line and is located at different coordinates for some reason.</p>
  
  <p>How can I get my circle to correctly follow along the line at (varying speeds)?</p>
  
  <p>UPDATE:
  Almost there! 
  I've added a jsfiddle: <a href="http://jsfiddle.net/mbrownshoes/k86fbade/6/" rel="nofollow noreferrer">http://jsfiddle.net/mbrownshoes/k86fbade/6/</a>
  Circle is moving at the correct speed to first point, now I need the circle to start each transition from the previous point and not from the beginning.</p>