Verwendung von "d" im Funktionsliteral in D3?

7

Ich unterrichte mich selbst D3 ohne zu viel Wissen über Syntax / Grammatik von Javascript. Kann jemand die Verwendung von "d" als Parameter im folgenden Funktionsliteral erklären?

Ich sehe, dass es auf den Datensatz hinweist, an dem gearbeitet wird, aber ich möchte die Grammatik dahinter verstehen.

%Vor%     
user3562812 23.06.2014, 05:22
quelle

1 Antwort

28

Dies wird eine anonyme Funktion genannt, bei der es sich um eine Funktion handelt, der keine benannte Bezeichnung zugewiesen ist. Anonyme Funktionen in Javascript sind Objekte wie alles andere und deshalb können Sie sie als Parameter an andere Javascript-Funktionen übergeben.

Im Fall von d3 können Sie eine Funktion als zweiten Parameter übergeben. Wie Sie festgestellt haben, wird diese Funktion mit dem aktuellen Datenelement sowie dem Index des aktuellen Datenelements aufgerufen. Wenn der zweite Parameter keine Funktion ist, kann stattdessen ein Wert verwendet werden.

In Ihrem Beispiel:

%Vor%

Sowohl cy als auch cx werden basierend auf dem Rückgabewert eines anonymen Funktionsaufrufs Werte zugewiesen, während r einen statischen Wert zugewiesen bekommt. Wir könnten das wie folgt umschreiben:

%Vor%

Hier habe ich die anonymen Funktionsaufrufe durch mehr Standardfunktionsdefinitionen ersetzt und den Namen der Funktion spezifiziert, die im d3 -Aufruf aufgerufen werden soll. Dies funktioniert genauso wie zuvor. Beachten Sie auch, dass in diesem Fall nichts Magisches an d ist.

%Vor%

Dieser Code wird auch das gleiche tun. Beachten Sie, dass ich den Parameter von d in foo umbenannt habe, dies ändert jedoch nur den Zugriff auf den Parameter innerhalb der Funktion. Es hat keine Auswirkungen außerhalb des Funktionsaufrufs. Im Allgemeinen wird in d3 Dokumentation und Tutorials d für das aktuelle Datenelement und i für den Index des aktuellen Datenelements verwendet. Der Index wird als zweites Element den Funktionsaufrufen wie folgt übergeben:

%Vor%

Jetzt speziell im Fall d3 :

%Vor%

Dies ist ein sehr häufiges Konstrukt in d3 . Der erste Schritt besteht immer darin, eine Auswahl zu treffen, um zu definieren, welche Gruppe von Elementen Sie ändern möchten (dies ist die .selectAll in diesem Fall). Danach können Sie zusätzliche Aufrufe (in diesem Fall die .attr-Aufrufe) verketten, die die gewünschten Änderungen an den Elementen tatsächlich ausführen.

Dies schafft eine sehr leistungsfähige Methode, mit datengesteuerten Dokumenten (wie Grafiken, Diagrammen usw.) zu arbeiten, ohne die Datenelemente manuell verfolgen zu müssen oder viele Schleifen erstellen zu müssen. Tatsächlich können Sie normalerweise feststellen, dass Sie d3 falsch verwenden, wenn Sie Schleifen in Ihrem Code haben, die sich mit dem Modifizieren von Elementen befassen.

Wenn Sie nicht viel Erfahrung mit Javascript haben, können die Lernprogramme in Ссылка hilfreich sein, um mit d3 zu beginnen.

    
Bill 23.06.2014, 06:11
quelle

Tags und Links