動畫正弦波示例的說明

我正在查看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是一個任意數還是有任何特定的原因？

來源

2016-05-21 dagda1

我認爲這是每圈的點數......精度和速度之間的妥協。我通常使用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]正弦波

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，但它可能只是安全的價值來處理渲染的不同長寬比seettings（我沒有在該平臺編碼，所以這只是猜測在我身邊）但正如我在評論中所說sinwave被縮放，所以PI期間x大小等於PI*circle_radius所以84最可能來自圓圈（我的原始答案）。

來源

2016-05-21 07:30:39 Spektre

是的，就是這樣！ –

實際上，示例中的代碼用於正弦圖上的點而不是圓。它們根本不在圓圈中使用 – dagda1

@ dagda1但是sinwave縮放到圓的大小，所以它或多或少是相同的東西 – Spektre

這可能只是一個幻數，也就是說，完全是任意的。事實上，正如你所說，我認爲的第一件事是它與圖的寬度有關。

這裏是一個小提琴：https://jsfiddle.net/1nboube9/1/

你可以調整數量，看看會發生什麼。在我看來，44以上的任何數字都可以做到這一點。

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

這就形成了一個非常不同的路徑：

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

但是，當然，路徑，如果你改變分母，以及是不一樣的。所以，我試過這個：

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

它創造了一條非常不愉快的路徑。所以，我相信這就是發生了什麼：設計者首先創建了data.push(i * 10/84);以使路徑更加圓形，然後相應地更改了循環。也許我完全錯了，但那是我的賭注。

來源

2016-05-21 07:10:43

動畫正弦波示例的說明

回答

相關問題