动画d3.js形状的提示

Question

您可以看到我在this

所处位置的工作示例

如何让这种不那么生涩？

代码的工作原理如下：

我有这个方法通过requestAnimationFrame

调用自己

y_

这反过来调用 animateCircle(state, direction) { this.drawSineGraph(state, direction); requestAnimationFrame(this.animateCircle.bind(this, state, direction)); } 函数：

drawSineGraph

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

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

Answer 1

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

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

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