Aufruffunktion der Javascript-Bibliothek d3

Ich kann nicht verstehen, wie d3.call () funktioniert und wann und wo ich das verwenden soll. Hier ist der Tutorial-Link, den ich zu vervollständigen versuche.

Kann jemand bitte genau erklären, was dieses Stück tut

var xAxis = d3.svg.axis()
              .scale(xScale)
              .orient("bottom");

svg.append("g").call(xAxis);

javascript d3.js

— Andy897
quelle

Der Link, den Sie bereitgestellt haben, erklärt, was zu call()

— tun

Ja, aber ich kann immer noch nicht bekommen, was svg.append ("g") .call (xAxis); macht :(

— Andy897

siehe github.com/d3/d3-selection/blob/master/README.md#selection_call

— Jason S

Antworten:

109

Ich denke, der Trick hier ist zu verstehen, dass xAxis eine Funktion ist, die eine Reihe von SVG-Elementen generiert. Tatsächlich ist es die von zurückgegebene Funktion d3.svg.axis(). Die Skalierungs- und Orientierungsfunktionen sind nur ein Teil der Verkettungssyntax (mehr dazu hier: http://alignedleft.com/tutorials/d3/chaining-methods/ ).

So svg.append("g")hängt ein SVG - Gruppen - Element an die SVG und gibt einen Verweis auf mich selbst in Form einer Auswahl (gleiche Ketten Syntax bei der Arbeit hier). Wenn Sie calleine Auswahl verwenden, rufen Sie die Funktion xAxisauf, die für die Elemente der Auswahl benannt ist g. In diesem Fall führen Sie die Achsenfunktion xAxisfür die neu erstellte und angehängte Gruppe aus g.

Wenn dies immer noch keinen Sinn ergibt, entspricht die obige Syntax:

xAxis(svg.append("g"));

oder:

d3.svg.axis()
      .scale(xScale)
      .orient("bottom")(svg.append("g"));

— Superboggly
quelle

Wie würde man die G-Elemente einer svg.axis () bearbeiten? Ich habe Etiketten, die ineinander übergehen, und ich möchte eine Transformation auf sie anwenden. Aber ich kann nicht scheinen, auf diese Elemente

— zuzugreifen

Überprüfen Sie die Antwort hier stackoverflow.com/questions/12825630/… Nachdem Sie die Text- oder Häkchenelemente ausgewählt haben, sollten Sie in der Lage sein, Transformationen anzuwenden, wenn Sie möchten.

— Superboggly

Gibt es einen Unterschied zwischen xAxis und dem einen oder anderen?

— Ich mag

Dies erklärt die .call()Methode im Allgemeinen gut. Insbesondere werden die Konsequenzen des Aufrufs des Achsenobjekts nicht erläutert. Und es ist nicht annähernd gerechtfertigt, die surreale Situation eines Achsenobjekts zu rechtfertigen, das sich sowohl wie ein Objekt als auch wie eine Funktion verhält . Warum in aller Welt das tun? Okay, die Dokumente sagen, dass das Aufrufen die Achse rendert . Ist das besser, als dem Achsenobjekt eine .render () -Methode zu geben? Würde das nicht viel einfacher unterstützenxAxis.scale(...).orient(...).render(...)

— Bob Stein

Aus den Dokumenten im Auswahlaufruf: "Der einzige Unterschied besteht darin, dass selection.call immer die Auswahl und nicht den Rückgabewert der aufgerufenen Funktion name zurückgibt."

— Heltonbiker

Die akzeptierte Antwort, die IMO ausgelassen hat, ist, dass .call()es sich um eine D3-API-Funktion handelt und nicht mit Function.prototype.call () zu verwechseln ist.

selection.call(function[, arguments…])

Ruft die angegebene Funktion genau einmal auf und übergibt diese Auswahl zusammen mit optionalen Argumenten. Gibt diese Auswahl zurück. Dies entspricht dem manuellen Aufrufen der Funktion, erleichtert jedoch die Verkettung von Methoden. So legen Sie beispielsweise mehrere Stile in einer wiederverwendbaren Funktion fest:

Sagen Sie jetzt:

d3.selectAll("div").call(name, "John", "Snow");

Dies entspricht in etwa:

name(d3.selectAll("div"), "John", "Snow");

Der einzige Unterschied besteht darin, dass selection.call immer die Auswahl und nicht den Rückgabewert der aufgerufenen Funktion name zurückgibt .

— Laktak
quelle