提示動畫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)); 
    }