Erklärung der Animation eines Sinus-Beispiel

Question

Ich sehe this Beispiel und ein Teil davon macht keinen Sinn.

Der Code erstellt ein Array von Werten wie folgt aus:

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

es dann dieses Array verwendet sowohl die x- und y-Werte für die grafische Darstellung zu erhalten, wo d ein Element des Arrays ist:

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

Ist 84 nur eine beliebige Zahl für die verfügbare Breite, die für den Graphen übrig bleibt, oder gibt es einen bestimmten Grund dafür, woher dieser stammt?

Answer 1

Ich denke, es ist eine Anzahl von Punkten pro Kreis ... Kompromiss zwischen Genauigkeit und Geschwindigkeit. Normalerweise verwende ich 36 für kleine Kreise und 90 für große. ... und ein paar Tausend für die Großen ... also ist die Idee, so wenig wie möglich zu verwenden, während der Kreis immer noch wie ein Kreis aussieht (im maximalen Zoom) und nicht wie ein Polygon.

Sie können dies auch algebraisch berechnen ...

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

n wo die Anzahl der Liniensegmente pro Umfang und e ist die maximale Entfernung von gewünschten Kreisform. wenn Sie es auf dem gewünschten Fehler in Pixeln festgelegt (und Radius r ist in Pixel), dann:

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

Hoffentlich habe ich keinen Fehler machen, während die Gleichungen direkt in SO-Editor abzuleiten.Also, wenn Sie wirklich präzise Kreis wollen gesetzt e=0.4 [pixels] und Sie sollten in Ordnung sein

[edit1] sin Welle

Die for-Schleife schafft Liste wit diese Eigenschaften:

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

Dann wird die Sinuswellen gemacht wird :

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

Welche gibt Ihnen:

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

Also die Sinwave rendert 10/(2*PI)= ~ 1.59 Perioden. Die halbe Überlappung wird durch die Ansicht abgeschnitten. Also in der Theorie könnten Sie 6.28/84 -> 7/84 anstelle von 10/84 verwenden, aber es ist vielleicht nur Sicherheit Wert zu verschiedenen Seitenverhältnis Seettings des Renderings (ich Code in dieser Plattform nicht, so ist dies nur Spekulation auf meiner Seite) Aber wie ich in den Kommentaren sagte Die Sinuswelle ist skaliert, so dass die PI Periode x Größe ist gleich PI*circle_radius so kommt die 84 am wahrscheinlichsten aus dem Kreis (meine ursprüngliche Antwort).

Answer 2

Dies ist möglicherweise nur eine magische Zahl, das heißt, völlig willkürlich. Wie Sie bereits sagten, war das erste, was ich dachte, dass es mit der Breite des Graphen zusammenhängt. Hier

ist eine Geige: https://jsfiddle.net/1nboube9/1/

Sie können die Anzahl zwicken und sehen, was passiert. Es scheint mir, dass jede Zahl über 44 den Trick macht.

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

Aber natürlich ist der Weg nicht das gleiche, wenn Sie den Nenner auch ändern:

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

Dies schafft einen ganz anderen Weg. Und so versuchte ich das:

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

Und es schafft einen sehr unangenehmen Weg. Also, ich glaube, dass dies passiert ist: Der Designer hat zuerst data.push(i * 10/84); erstellt, um den Pfad kreisförmiger zu machen, und dann die Schleife entsprechend geändert. Vielleicht bin ich völlig falsch, aber das ist meine Wette.