Erste Daten

Schnipsel 1Erste Daten

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>D3 Test</title> 
 
    <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> 
 
</head> 
 

 
<body> 
 
    <script type="text/javascript"> 
 
    var data = []; 
 
    for (i = 0; i < 3; i += 1) { 
 
     data.push(i); 
 
    } 
 
    d3.select('body') 
 
     // .selectAll('p') 
 
     .data(data) 
 
     .enter() 
 
     .append('p') 
 
     .text(function(d) { 
 
     return d; 
 
     }); 
 
    </script> 
 
</body> 
 
</html>

Schnipsel 2

ohne Verwendung selectAll in d3.js ignoriert

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>D3 Test</title> 
 
    <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> 
 
</head> 
 

 
<body> 
 
    <script type="text/javascript"> 
 
    var data = []; 
 
    for (i = 0; i < 3; i += 1) { 
 
     data.push(i); 
 
    } 
 
    d3.select('body') 
 
     .selectAll('p') 
 
     .data(data) 
 
     .enter() 
 
     .append('p') 
 
     .text(function(d) { 
 
     return d; 
 
     }); 
 
    </script> 
 
</body> 
 
</html>

Der Code .selectAll('p') ist im ersten Snippet kommentiert. Ich konnte nicht verstehen, warum die ersten Daten aus diesem Grund ignoriert werden.

Ich bin ein Neuling auf d3.js und was ich verstanden, wie ich in meinem HTML keine p Tag haben die .selectAll('p') eine leere Auswahl zurück und p werden als pro meine Zähldaten angehängt.

Vielen Dank im Voraus.

Quelle

2016-08-07 Ayan

Um zu verstehen, was passiert ist, müssen Sie verstehen, was eine "Enter" -Auswahl ist. Das Beispiel am Ende dieses Posts erläutert kurz die "Enter" -Auswahl und warum Sie in Ihrem zweiten Snippet selectAll("p") haben müssen, auch wenn Sie <p> im Dokument nicht haben. Jetzt

, lassen Sie uns Ihre Schnipsel sehen:

Ihre erste Schnipsel:

In Ihrem ersten Schnipsel, data ist [0, 1, 2]. Also, Sie haben 3 Elemente. Wenn Sie den Körper auswählen, gibt es eindeutig eine body im DOM. Sie verknüpfen also das erste Datum (0) mit diesem Element (Körper). Jetzt haben Sie zwei Daten, die keinem DOM-Element zugeordnet sind: 1 und 2. Diese beiden Daten sind Ihre "Enter" -Auswahl. Wenn Sie die <p> anhängen, enthält Ihre Eingabeauswahl nur diese beiden Zahlen.

Ihr zweites Schnipsel

In Ihrem zweiten Schnipsel sind Daten wieder [0, 1, 2]. Der Unterschied ist, dass Sie jetzt alle <p> ... auswählen, aber es gibt keine. Dies ist der "Platzhalter" in dem Beispiel, das ich verlinkt habe. Da es im DOM keine <p> gibt, die den Daten zugeordnet werden soll, enthält Ihre Eingabeauswahl alle 3 Daten: 0, 1 und 2.

Wie ich im Beispiel schrieb:

Wenn in Ihrem „enter“ Auswahl Sie etwas auswählen, die Ihr nicht vorhanden ist, „geben Sie“ Auswahl immer alle Ihre Daten enthalten.

Die Rolle der Platzhalter in "enter" Auswahl

Was für eine Auswahl geben?

In D3.js, wenn man Daten an DOM Elemente bindet, sind drei Fälle möglich:

Die Anzahl der Elemente und die Anzahl der Datenpunkte die gleichen sind;
Es gibt mehr Elemente als Datenpunkte;
Es gibt mehr Datenpunkte als Elemente;

In der Situation, # 3, alle Datenpunkte ohne ein entsprechendes DOM-Element gehören die Auswahl einzugeben. In D3.js gibt Auswahlen sind Auswahlen, die nach dem Verknüpfen von Elementen mit den Daten alle Daten enthält, die keinem DOM-Element entsprechen. Wenn wir eine append Funktion in einer Auswahl Auswahl verwenden, erstellt D3 neue Elemente, die diese Daten für uns binden.

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

Wie wir die eingeben Auswahl sehen können, auf der linken Seite der blaue Bereich ist : Datenpunkte ohne entsprechende DOM-Elemente.

Die Struktur der Eingabe-Auswahl

Typischerweise wird ein eingeben Auswahl diese 4 Schritte aufweist:

selectAll: Wählen Elemente im DOM;
data: Zählt und analysiert die Daten;
enter: Vergleichen der Auswahl mit den Daten, erstellt neue Elemente;
append: Fügen Sie die tatsächlichen Elemente im DOM an;

Dies ist ein sehr einfaches Beispiel (siehe die 4 Schritte im 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 here):

Beachten Sie, dass In diesem Fall haben wir selectAll("div") als erste Zeile in unserer Auswahlvariablen "enter" verwendet. Wir haben ein Dataset mit 6 Werten und D3 hat 6 Divs für uns erstellt.

Die Rolle der Platzhalter

Aber nehmen wir an, dass wir bereits ein div in unserem Dokument haben, so etwas wie <div>This is my chart</div> an der Spitze. In diesem Fall, wenn wir schreiben:

body.selectAll("div")

wir wählen das vorhandene div. Unsere Eingabeauswahl hat also nur 5 Daten ohne übereinstimmende Elemente. Zum Beispiel in this jsfiddle, wo es bereits ein div in der HTML ist („Das ist mein Plan“), wird dies das Ergebnis sein:

Wir nicht den Wert „40“ mehr sehen: unser erster "Balken" ist verschwunden, und der Grund dafür ist, dass unsere "Enter" -Auswahl jetzt nur noch aus 5 Elementen besteht.

Was wir hier verstehen müssen, ist, dass in der ersten Zeile der Auswahlgröße eingeben, selectAll("div"), diese divs sind nur Platzhalter. Wir müssen nicht alle divs auswählen, wenn wir divs oder alle circle anfügen, wenn wir circle anhängen. Wir können verschiedene Dinge auswählen. Und wenn wir ein „update“ oder eine „Exit“ Auswahl haben, nicht planen, können wir wählen etwas:

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

Auf diese Art und Weise sind wir die Auswahl all „.foo“. Hier ist "foo" eine Klasse, die nicht nur nicht existiert, sondern auch nirgendwo anders im Code! Aber es ist egal, das ist nur ein Platzhalter. Die Logik ist dies:

Wenn in Ihre Auswahl „Enter“ Sie etwas auswählen, die nicht, Ihre „enter“ Auswahl wird immer enthalten alle Daten vorhanden ist.

nun die Auswahl .foo, unsere "enter" Auswahl haben 6 Elemente, auch wenn wir bereits ein div in dem Dokument haben:

Und hier die corresponding jsfiddle ist.

Auswahl null

Bei weitem der beste Weg, um sicherzustellen, dass es Ihnen an nichts Auswahl null ist die Auswahl. Nicht nur das, aber diese Alternative ist viel schneller als jede andere.

So kann eine Auswahl eingeben, tun gerade:

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

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

Fazit

Beim Umgang mit "enter" Auswahl, seien Sie besonders vorsichtig nicht etwas auswählen, das bereits existiert.Sie können alles in Ihrem selectAll verwenden, sogar Dinge, die nicht existieren und niemals existieren werden (wenn Sie nicht vorhaben, eine "update" oder "exit" Auswahl zu haben).

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

Quelle

2016-08-07 05:29:30

hey das ist eine große Erklärung. Danke, Mann. – Ayan

Antwort

Verwandte Themen