D3 JS Was bedeutet die Bedeutung von F für die anonyme Funktion?

Question

Ich versuche D3 zu lernen und es fällt mir schwer, die anonymen Funktionen zu verstehen.

Im folgenden Beispiel gibt es unten Funktion (f) und es gibt die Variable zurück "interpoliere" mit dem Parameter f (was ich denke, ist selbst akward, da "interpolieren" keine Funktion ist, sondern a Variable).

Aber was ist die Bedeutung von F? Ich sehe nicht, wie oder wo es in der Funktion "interpolieren" verwendet wird. Wenn ich F lösche und passiere(), bricht meine Animation ab.

Dank! :)

svg.append('path') 
     .attr('class', 'line') 
     .attr('d', line(lineData)) 
     .transition() 
     .duration(3000) 
     .attrTween('d', pathTween); 

    function pathTween() { 
     var interpolate = d3.scale.quantile() 
       .domain([0,1]) 
       .range(d3.range(0, 7)); 
     return function(f) { 
      return line(lineData.slice(0, interpolate(f))); 
     }; 
    } 

Answer 1

Lasst uns diese brechen:

.... 
.attrTween('d', pathTween); 

function pathTween() { 
    var interpolate = d3.scale.quantile() 
      .domain([0,1]) 
      .range(d3.range(0, 7)); 
    return function(f) { 
     return line(lineData.slice(0, interpolate(f))); 
    }; 
} 

1. Wir haben die Verschlussfunktion pathTween-attrTween sind vorbei. Unter der Haube ruft d3pathTween für jedes Element in Ihrer Auswahl auf (in Ihrem Fall ist es nur ein path).
2. d3 erwartet die Funktion, die an attrTween übergeben wird, um eine Funktion zurückzugeben. Dies ist die anonyme Funktion, die den Parameter f übernimmt (die meisten d3 Beispiele verwenden die Variable t, mehr dazu in einer Sekunde).
3. Die pathTween Funktion ist eine Schließung, weil es die innere Variableinterpolate erstellt und schließt, damit es in der inneren zurückgegebenen Funktion verfügbar ist. Sie haben it returns the variable "interpolate" with the parameter f (which i think is itself awkward, since "interpolate" is not a function but a variable) angegeben. Das ist nicht wahr; Zuerst geben wir interpolate überhaupt nicht zurück (aber es ist in der Schließung verfügbar) und zweitens ist es eine -Funktion, die in einer Variablen gespeichert wird. Das Speichern von Funktionen in Variablen ist in JavaScript (und vielen anderen Programmiersprachen) sehr üblich.
4. Nun, da d3 die innere Anon-Funktion hat, wird sie für jeden Tick der Animation aufgerufen (normalerweise alle 16ms). Wenn es es nennt, wird es in f gehen. Was ist f? Es ist ein Timer (warum es normalerweise t genannt wird). Es enthält einen Wert von 0 bis 1, der anzeigt, wo es im Übergang ist (0 ist Start, 1 am Ende). Diese Variable wird dann an die Funktioninterpolate übergeben, die zufällig einen Wert zwischen 0 und 1 erwartet (siehe domain[0,1]).

Check this out:

var interpolate = d3.scale.quantile() 
 
       .domain([0,1]) 
 
       .range(d3.range(0, 7)); 
 
       
 
console.log(typeof(interpolate)); 
 

 
console.log(interpolate(0)); 
 
console.log(interpolate(0.25)); 
 
console.log(interpolate(0.5)); 
 
console.log(interpolate(1));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 2

In Javascript können Funktionen in einer Variablen übergeben werden! https://en.wikipedia.org/wiki/First-class_function

var interpolate = d3.scale.quantile() 
       .domain([0,1]) 
       .range(d3.range(0, 7)); 

in dieser Linie, schafft D3 eine neue Funktion für Sie und es wird dann die Variablen zugewiesen interpolate bereit

return function(f) { 
      return line(lineData.slice(0, interpolate(f))); 
     }; 

eine Funktion, kann zu einem späteren Zeitpunkt ausgeführt werden diese dann wieder von D3 angerufen werden. Wenn D3 diese Funktion aufruft, übergibt es einen Wert für f, den Ihre interpolierte Funktion als Eingabe verwenden kann. Das Entfernen von f würde bedeuten, dass stattdessen der Wert undefined an die Funktion übergeben wird.