D3.js beginnt mit der Erstellung des P-Elements (zeigt ladbare Daten)

D3.js beginnt mit der Erstellung des P-Elements (zeigt ladbare Daten)_Javascript-Tipps

WBOY

Freigeben： 2016-05-16 16:32:36

Original

1463 Leute haben es durchsucht

D3 ist eine visuelle JS-Bibliothek, die auf Datenoperationen basiert. Um d3 zu verstehen, beginnen wir mit der grundlegendsten Anzeige ladbarer Daten.

Ich werde nicht näher auf das Grundgerüst von HTML eingehen, beginnen wir mit dem Code und erklären dann:

Erstellen Sie ein neues Testverzeichnis und erstellen Sie in diesem Verzeichnis zwei Ordner, demo und d3. Demo speichert die zu schreibenden HTML-Dateien und D3 speichert d3.v3.js

Erstellen Sie eine neue indexP.html im Demo-Ordner, kopieren Sie den folgenden Code hinein und doppelklicken Sie darauf, um sie im Browser zu öffnen und den Effekt zu sehen.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>D3: Setting paragraphs' style conditionally, based on data</title> 
<script type="text/javascript" src="../d3/d3.v3.js"></script> 
</head> 
<body> 
<script type="text/javascript"> 

var dataset = [ 5, 10, 15, 20, 25 ]; 

d3.select("body").selectAll("p") 
.data(dataset) 
.enter() 
.append("p") 
.text(function(d) { 
return "I can count up to " + d; 
}) 
.style("color", function(d) { 
if (d > 15) { //Threshold of 15 
return "red"; 
} else { 
return "black"; 
} 
}); 

</script> 
</body> 
</html>

Nach dem Login kopieren

Die von dieser einfachen Demo implementierten Funktionen: Fügen Sie dem Text ein p-Tag hinzu, fügen Sie den von d3 geladenen Textinhalt zum p-Tag hinzu und passen Sie die Textfarbe entsprechend den Funktionseinstellungsbedingungen an.

Der obige Webseitencode und der JS-Code im Textkörper sind die auf der Seite angezeigten Datenoperationen. Für viele zukünftige Beispiele müssen Sie nur diesen Teil ändern, und die anderen Teile können als Seitenrahmen betrachtet werden.

Der Inhalt hier wird im Allgemeinen im vorherigen Artikel besprochen. Verwenden Sie die D3-Verkettung, um Schritt-für-Schritt-Datenoperationen für dasselbe Objekt zu verbinden und so die Wartung zu vereinfachen.

d3.select("body") wählt das Körperelement aus und verbindet es mit der nächsten Methode

.selectAll("p") wählt alle Absätze aus

.data(dataset) analysiert und lädt Array-Daten. Jede nachfolgende Methode wird fünfmal nacheinander gemäß dem Array-Index ausgeführt

.enter() erstellt ein neues datengebundenes Platzhalterelement (entspricht der Erstellung von 5 vorübergehend unbekannten Tags).

Die Anzahl der erstellten Tags wird durch die Anzahl der ausgewählten vorhandenen Tags und die Länge des geladenen Datenarrays bestimmt.

Wie in diesem Beispiel: Wenn der Textkörper weniger als 5 p-Tags enthält, erstellen Sie diese (der Textkörper enthält jetzt 0 p-Tags, daher werden 5 erstellt),

Wenn mehr als eines vorhanden ist, wird es nicht erstellt. Die Gesamtzahl der endgültigen Platzhalterelemente und p-Elemente muss 5 betragen.

.append("p") ändert das Platzhalterelement in ein p-Element

.text(function(d) {}) Schreiben Sie eine anonyme Funktion, um den Anzeigeinhalt jedes Absatzes zu steuern, und geben Sie normalerweise eine Zeichenfolge zurück. Mit dieser Methode können Sie schreiben, was Sie wollen,

Dieses Beispiel ermöglicht ihm die Ausgabe von I can count up to plus dem entsprechenden Array-Elementwert für jeden Absatz

Das Funktionsformat ist festgelegt. Nur so kann Funktion(d) Daten in die Funktion laden.

.style("color","") legt das Textfarbattribut von CSS fest. Genau wie Text kann die festgelegte Zeichenfolge verwendet werden, um die gewünschten Vorgänge mithilfe der Funktion auszuführen. Wenn in diesem Beispiel der dem Absatz entsprechende eingehende Wert größer als 15 ist, wird die Zeile rot angezeigt

Schließlich ist der Effekt, den wir sehen, wie unten dargestellt:

Das ist alles für diesen Artikel. Im Folgenden wird vorgestellt, wie man einen Kreis in SVG zeichnet, sowie ein einfaches Kraftdiagramm zum Verbinden von Kreisen