解释动画正弦波的例子

Question

我正在查看this示例，其中一部分没有意义。

代码创建了一个像这样的值数组：

for (i = 0; i < 84; i++) {
  data.push(i * 10 / 84);
}

然后使用此数组获取图形的x和y值，其中d是数组的元素：

sine
    .x(function (d, i) { return xScale(d); })
    .y(function (d, i) { return yScale(Math.sin(d - time)); });

84只是图表剩余可用宽度的任意数字，或者是否有任何特殊原因来自何处？

Answer 1

我认为这是每个圆圈的一些点...准确性和速度之间的妥协。我通常使用36表示小圆圈，90表示大圆圈。 ......对于巨大的......而且只有几千个...所以我的想法是使用尽可能低的数量，而圆圈看起来像圆圈（在最大变焦范围内）而不是多边形。

你也可以用代数计算......

da=2.0*M_PI/n
e=r-(r*cos(0.5*da))

其中n是每个圆周的线段数，e是距所需圆形的最大距离。如果您将其设置为所需的像素误差（并且半径r以像素为单位），则：

n=M_PI/acos((r-e)/r)

希望我在SO编辑器中直接导出方程式时没有犯任何错误。所以，如果你想要精确的圆形集e=0.4 [pixels]并且你应该没问题

[edit1] sin wave

for循环使用以下属性创建列表：

d(i) = < 0.0 , 10.0 )
i = { 0,1,2,...83 }

然后渲染了sinwave：

x(i) = xscale * d(i)
y(i) = yscale * sin(d(i)-time)

这给了你：

x(i) = < 0.0 , xscale )
y(i) = < -yscale , +yscale )

因此sinwave呈现10/(2*PI)= ~ 1.59个句点。视图切断了半重叠。所以从理论上讲你可以使用6.28/84 -> 7/84而不是10/84，但是处理渲染的不同宽高比选择可能只是安全价值（我不在该平台中编码，所以这只是我身边的推测）但正如我在评论中所说，sinwave被缩放，因此PI句点x大小等于PI*circle_radius，因此84最有可能来自圆圈（我原来的答案）。 / p>

Answer 2

这可能只是一个神奇的数字，也就是完全随意的。事实上，正如你所说，我认为首先是它与图的宽度有关。

这是一个小提琴：https://jsfiddle.net/1nboube9/1/

您可以调整数字，看看会发生什么。在我看来，44以上的任何数字都可以解决问题。

for (i = 0; i < 44; i++) {
  data.push(i * 10 / 84);
}

但是，当然，如果改变分母，路径也不一样：

for (i = 0; i < 44; i++) {
  data.push(i * 10 / 44);
}

这会创建一条完全不同的路径。所以，我试过这个：

for (i = 0; i < someNumber; i++) {
  data.push(i);
}

它创造了一条非常不愉快的道路。所以，我相信这就是发生的事情：设计者首先创建data.push(i * 10 / 84);以使路径更圆，然后相应地更改循环。也许我完全错了，但那是我的赌注。