正弦波のアニメーションの説明

Question

私はthisの例を見ており、これの一部は意味をなさない。

コードは、このような値の配列を作成します。

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

それは次にdが配列の要素であり、グラフのxとyの値の両方を得るために、この配列を使用して：

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

グラフに残っている利用可能な幅の任意の数は84か、これがどこから来たのかの特別な理由はありますか？

Answer 1

私はそれが精度と速度の間の妥協点であると考えています。私は通常、小さい円には36を使用し、大きなものには90を使用します。 ...と巨大なもののために数千...考えられるので、円は（最大ズームで）円のように見え、ポリゴンに似ていないように考えてください。

また...代数nが周あたりのラインセグメントの数であり、eが所望の円形形状からの最大距離である

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

これを計算することができます。その後、あなたはピクセル単位で必要なエラーに設定（および半径rはピクセル単位である）場合：SOエディタで直接方程式を導出しながら、

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

うまくいけば、私は間違いをしませんでした。あなたが望むのであれば、本当に正確な円がe=0.4 [pixels]を設定すると、あなたは問題ないはずです

は[EDIT1]罪の波は

ループのリストウィットこれらのプロパティを作成：

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ピリオドをレンダリングします。半分の重なりは、ビューによって切り取られます。理論的には10/84の代わりに6.28/84 -> 7/84を使うことができますが、レンダリングの異なるアスペクト比の設定を扱うのは安全値かもしれません（私はそのプラットフォームではコードしませんので、これは私の側での推測です）。正弦波は、PIの周期xのサイズがPI*circle_radiusに等しくなるようにスケーリングされるので、84はサークルから来る可能性が最も高い（私の元の回答）。

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);を作成してパスをより円形にし、それに応じてループを変更しました。たぶん私は完全に間違っていますが、それは私の賭けです。