d3.js
Auswahlmöglichkeiten

Syntax

• d3. Auswahl ( Auswahl )
• d3. selectAll ( Auswahl )
• Auswahl . Auswahl ( Auswahl )
• Auswahl . selectAll ( Auswahl )
• Auswahl . filter (filter)
• Auswahl . zusammenführen (andere)

Bemerkungen

Grundauswahl und Modifikationen

Wenn Sie mit der Syntax von jQuery und Sizzle vertraut sind, sollte die Auswahl von d3 nicht viel anders sein. d3 ahmt die W3C Selectors API nach, um die Interaktion mit Elementen zu vereinfachen.

Um ein einfaches Beispiel zu erhalten, wählen Sie alle <p> und fügen Sie jeweils eine Änderung hinzu:

d3.selectAll('p')
  .attr('class','textClass') 
  .style('color', 'white');

Kurz gesagt ist dies relativ das Gleiche wie in jQuery

$('p')
  .attr('class','textClass') 
  .css('color, 'white')

Im Allgemeinen beginnen Sie mit einer einfachen Auswahl in Ihrem Container div, um ein SVG-Element hinzuzufügen, das einer Variablen zugewiesen wird (am häufigsten als svg bezeichnet).

var svg = d3.select('#divID').append('svg');

Von hier aus können wir svg dazu auffordern, eine Unterauswahl mehrerer Objekte svg (auch wenn sie noch nicht existieren).

svg.selectAll('path')

Verschiedene Selektoren

Sie können Elemente mit verschiedenen Selektoren auswählen:

• nach tag: "div"
• nach Klasse: ".class"
• von id: "#id"
• nach Attribut: "[color=blue]"
• Mehrfachselektoren (ODER): "div1, div2, class1"
• Mehrfachselektoren (UND): "div1 div2 class1"

Einfache datenbeschränkte Auswahl

var myData = [
    { name: "test1", value: "ok" },
    { name: "test2", value: "nok" }
]

// We have to select elements (here div.samples)
// and assign data. The second parameter of data() is really important,
// it will determine the "key" to identify part of data (datum) attached to an 
// element.
var mySelection = d3.select(document.body).selectAll("div.samples") // <- a selection
                   .data(myData, function(d){ return d.name; }); // <- data binding

// The "update" state is when a datum of data array has already
// an existing element associated.
mySelection.attr("class", "samples update")

// A datum is in the "enter" state when it's not assigned
// to an existing element (based on the key param of data())
// i.e. new elements in data array with a new key (here "name")
mySelection.enter().append("div")
    .attr("class", "samples enter")
    .text(function(d){ return d.name; });

// The "exit" state is when the bounded datum of an element
// is not in the data array
// i.e. removal of a row (or modifying "name" attribute)
// if we change "test1" to "test3", "test1" bounded
//          element will figure in exit() selection
// "test3" bounded element will be created in the enter() selection
mySelection.exit().attr("class", "samples remove");

Die Rolle von Platzhaltern bei der Auswahl von Einträgen

Was ist eine Enter-Auswahl?

Wenn in D3.js Daten an DOM-Elemente gebunden werden, sind drei Situationen möglich:

1. Die Anzahl der Elemente und die Anzahl der Datenpunkte sind gleich.
2. Es gibt mehr Elemente als Datenpunkte.
3. Es gibt mehr Datenpunkte als Elemente.

In der Situation , # 3, alle Datenpunkte ohne ein entsprechendes DOM - Element gehören zur Auswahl gelangen. Somit In D3.js Geben Auswahlen Auswahlen sind , dass nach Elementen mit dem Datenverbindungs enthält alle Daten , die nicht DOM - Element übereinstimmen. Wenn wir eine verwenden append Funktion in einer Auswahl eingeben, wird D3 neue Elemente schaffen für uns , dass die Datenbindung.

Dies ist ein Venn-Diagramm, das die möglichen Situationen in Bezug auf die Anzahl der Datenpunkte / Anzahl der DOM-Elemente erläutert:

Wie wir sehen können, ist die Eingabeauswahl der blaue Bereich links: Datenpunkte ohne entsprechende DOM-Elemente.

Die Struktur der Enter-Auswahl

Eine Eingabeauswahl hat normalerweise die folgenden 4 Schritte:

1. selectAll : Elemente im DOM selectAll ;
2. data : Zählt und analysiert die Daten.
3. enter : Durch Vergleichen der Auswahl mit den Daten werden neue Elemente erstellt.
4. append : Die tatsächlichen Elemente im DOM append .

Dies ist ein sehr einfaches Beispiel (siehe die 4 Schritte in den var divs ):

var data = [40, 80, 150, 160, 230, 260];

var body = d3.select("body");

var divs = body.selectAll("div")
    .data(data)
    .enter()
    .append("div");

divs.style("width", function(d) { return d + "px"; })
    .attr("class", "divchart")
    .text(function(d) { return d; });

Und das ist das Ergebnis ( jsfiddle hier ):

Beachten Sie, dass in diesem Fall selectAll("div") als erste Zeile in unserer Auswahlvariable "enter" verwendet wurde. Wir haben einen Datensatz mit 6 Werten und D3 hat 6 Divs für uns erstellt.

Die Rolle der Platzhalter

Angenommen, wir haben bereits ein div in unserem Dokument, etwa <div>This is my chart</div> oben. In diesem Fall, wenn wir schreiben:

body.selectAll("div")

Wir wählen das vorhandene div aus. Unsere Eingabe-Auswahl hat also nur 5 Datum ohne passende Elemente. Zum Beispiel in diesem jsfiddle , wo es bereits ein div im HTML- Code gibt ("This is my chart"), wird dies das Ergebnis sein:

Wir sehen den Wert "40" nicht mehr: Unser erster "Balken" ist verschwunden, und der Grund dafür ist, dass unsere Auswahl "Enter" jetzt nur noch 5 Elemente hat.

Was wir hier verstehen müssen ist, dass in der ersten Zeile unserer Enter-Auswahlvariable selectAll("div") diese Divs nur Platzhalter sind . Wir müssen nicht alle divs auswählen, wenn wir divs anhängen, oder den gesamten circle wenn wir einen circle anhängen. Wir können verschiedene Dinge auswählen. Und wenn wir nicht vorhaben, ein "Update" oder ein "Exit" auszuwählen, können wir alles auswählen:

var divs = body.selectAll(".foo")//this class doesn't exist, and never will!
    .data(data)
    .enter()
    .append("div");

Auf diese Weise wählen wir alle ".foo" aus. Hier ist "foo" eine Klasse, die nicht nur nicht existiert, sondern auch nirgendwo anders im Code erstellt wurde! Das ist aber egal, dies ist nur ein Platzhalter. Die Logik ist folgende:

Wenn Sie in Ihrer Auswahl "Eingabe" etwas auswählen, das nicht existiert, enthält Ihre Auswahl "Eingabe" immer alle Ihre Daten.

.foo Sie nun .foo auswählen, enthält unsere Auswahl "enter" 6 Elemente, selbst wenn im Dokument bereits ein div vorhanden ist:

Und hier ist das entsprechende jsfiddle .

null auswählen

Die beste Möglichkeit, um sicherzustellen, dass Sie nichts auswählen, ist die Auswahl von null . Nicht nur das, diese Alternative ist viel schneller als jede andere.

Führen Sie für eine Auswahl die Eingabe einfach aus:

selection.selectAll(null)
    .data(data)
    .enter()
    .append(element);

Hier ist eine Demo-Geige: https://jsfiddle.net/gerardofurtado/th6s160p/

Fazit

Achten Sie bei der Auswahl von "Eingaben" darauf, dass Sie nicht auswählen, was bereits vorhanden ist. Sie können alles in Ihrer selectAll , auch Dinge, die nicht existieren und niemals existieren werden (wenn Sie nicht selectAll , ein "Update" oder "Exit" auszuwählen).

Der Code in den Beispielen basiert auf diesem Code von Mike Bostock: https://bl.ocks.org/mbostock/7322386

Verwenden Sie "this" mit einer Pfeilfunktion

Die meisten Funktionen in D3.js akzeptieren eine anonyme Funktion als Argument. Die häufigsten Beispiele sind .attr , .style , .text , .on und .data , aber die Liste ist viel größer.

In solchen Fällen wird die anonyme Funktion für jedes ausgewählte Element ausgewertet und der Reihe nach übergeben:

1. Das aktuelle Datum ( d )
2. Der aktuelle Index ( i )
3. Die aktuelle Gruppe ( nodes )
4. this als aktuelles DOM-Element.

Das Datum, der Index und die aktuelle Gruppe werden als Argumente übergeben, das berühmte erste, zweite und dritte Argument in D3.js (dessen Parameter traditionell d , i und p in D3 v3.x heißen). Um this , muss jedoch kein Argument verwendet werden:

.on("mouseover", function(){
    d3.select(this);
});

Der obige Code wählt this , wenn die Maus über das Element ist. Überprüfen Sie, ob es in dieser Geige funktioniert: https://jsfiddle.net/y5fwgopx/

Die Pfeilfunktion

Als neue ES6-Syntax hat eine Pfeilfunktion im Vergleich zum Funktionsausdruck eine kürzere Syntax. Für einen D3-Programmierer, der this ständig verwendet, gibt es jedoch eine Gefahr: Eine Pfeilfunktion erzeugt this Kontext nicht. Das bedeutet , dass in einer Pfeil Funktion, this seine ursprüngliche Bedeutung aus dem einschließenden Kontext hat.

Dies kann unter verschiedenen Umständen nützlich sein, aber es ist ein Problem für einen Codierer, der es gewohnt ist, this in D3 zu verwenden. Wenn Sie beispielsweise dasselbe Beispiel in der oben genannten Geige verwenden, funktioniert dies nicht:

.on("mouseover", ()=>{
    d3.select(this);
});

Wenn Sie daran zweifeln, ist hier die Geige: https://jsfiddle.net/tfxLsv9u/

Nun, das ist kein großes Problem: Man kann bei Bedarf einfach einen regulären, altmodischen Funktionsausdruck verwenden. Was aber, wenn Sie Ihren gesamten Code mithilfe von Pfeilfunktionen schreiben möchten? Ist es möglich , einen Code mit Pfeil Funktionen zu haben und nach wie vor richtig nutzt this in D3?

Das zweite und dritte Argument kombiniert

Die Antwort lautet ja , weil nodes[i] this ist. Der Hinweis ist in der gesamten D3-API vorhanden, wenn er Folgendes beschreibt:

... mit this als aktuellem DOM-Element ( nodes[i] )

Die Erklärung ist einfach: Da nodes die aktuelle Gruppe von Elementen im DOM und i der Index jedes Elements ist, beziehen sich nodes[i] auf das aktuelle DOM-Element selbst. Das ist this .

Daher kann man verwenden:

.on("mouseover", (d, i, nodes) => {
    d3.select(nodes[i]);
});

Und hier ist die entsprechende Geige: https://jsfiddle.net/2p2ux38s/