title: tips for animating d3.js shape
body: <p>You can see a working example of where I am with <a href="http://www.d3geometry.com/sine2" rel="nofollow">this</a> </p>
  
  <p>How can I make this less jerky?</p>
  
  <p>The code works like this:</p>
  
  <p>I have this method that calls itself via requestAnimationFrame</p>
  
  <pre><code>  animateCircle(state, direction) {
      this.drawSineGraph(state, direction);
  
      requestAnimationFrame(this.animateCircle.bind(this, state, direction));
    }
  </code></pre>
  
  <p>This in turn calls a <code>drawSineGraph</code> function:</p>
  
  <pre><code>  drawSineGraph(state, direction) {
      d3.select('.sine-curve').remove();
  
      const increase = 54 / 1000;
  
      state.sineIncrease = state.sineIncrease || 0;
  
      state.sineIncrease += increase;
  
      const sineData = d3.range(0, state.sineIncrease)
              .map(x =&gt; x * 10 / 85)
              .map((x) =&gt; {
                return {x: x, y: Math.sin(x)};
              });
  
      state.nextCoord = {x: state.xScale(_.last(sineData).x), y: state.yScale(Math.sin(_.last(sineData).y) + 1)};
  
      const sine = d3.svg.line()
              .interpolate('monotone')
              .x( (d) =&gt; {return state.xScale(d.x);})
              .y( (d) =&gt; {return state.yScale(d.y + 1);});
  
      state.xAxisGroup.append('path')
        .datum(sineData)
        .attr('class', 'sine-curve')
        .attr('d', sine);
    }
  </code></pre>
  
  <p>It increases a counter and draws the sine wave up to that point but the effect is very jerky.</p>
  
  <p>How can I achieve a smooth movement as the sine wave expands?</p>