javascript - 动画d3.js形状的技巧

您可以看到我在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);
  }

它增加了一个计数器，并将正弦波拉到该点，但是效果非常不稳定。

当正弦波扩展时，如何实现平稳的运动？

最佳答案

查看生成代码，一次又一次地重新创建每个曲线段。重叠超过100条曲线。您必须在上一个句段的末尾添加一个句段。问题在于：

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

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

关于javascript - 动画d3.js形状的技巧，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37688645/