советы для анимации d3.js формы

Question

Вы можете увидеть рабочий пример, где я с this

Как я могу сделать это меньше дергаться?

код работает так:

Я это метод, который называет себя через requestAnimationFrame

animateCircle(state, direction) { 
    this.drawSineGraph(state, direction); 

    requestAnimationFrame(this.animateCircle.bind(this, state, direction)); 
    } 

Это, в свою очередь, вызывает drawSineGraph функцию:

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 => x * 10/85) 
      .map((x) => { 
       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) => {return state.xScale(d.x);}) 
      .y((d) => {return state.yScale(d.y + 1);}); 

    state.xAxisGroup.append('path') 
     .datum(sineData) 
     .attr('class', 'sine-curve') 
     .attr('d', sine); 
    } 

Это увеличивает счетчик и рисует синусоидальную волну до этой точки, но эффект очень рывкий.

Как добиться плавного движения по мере расширения синусоидальной волны?

Answer 1

Посмотрите на код генерации, вы повторяете снова и снова каждый сегмент кривой. Перекрытие более 100 кривых. Вы должны добавить сегмент в конце предыдущего сегмента. Проблемы ИТС:

animateCircle(state, direction) { 
    this.drawSineGraph(state, direction); // <--recreate the curve from the origin 

    requestAnimationFrame(this.animateCircle.bind(this, state, direction)); 
    }