D3 ist eine visuelle JS -Bibliothek, die auf Datenoperationen basiert. Um D3 zu verstehen, beginnen wir mit der grundlegendsten Anzeige von ladbaren Daten.
Ich werde nicht viel über den grundlegenden Framework von HTML sagen, ich werde den Code zuerst einsetzen und ihn dann erklären:
Erstellen Sie ein neues Testverzeichnis und erstellen Sie zwei Ordner Demo und D3 unter diesem Verzeichnis. Demo speichert die zu schriftliche HTML -Datei, und D3 speichert D3.v3.js
Erstellen Sie einen neuen Indexp.html unter dem Demo-Ordner, kopieren Sie den folgenden Code und doppelklicken Sie, um den Effekt im Browser zu öffnen.
<! DocType html> <html lang = "en"> <pead> <meta charset = "utf-8"> <title> d3: Setzen Sie den Stil des Absatzes bedingt ein, basierend auf Daten </title> <script type = "text/javascript" src = "../ D3/D3.V3.JS"> </script> Datensatz = [5, 10, 15, 20, 25]; D3.Select ("Body"). SelectAll ("P") .Data (Datensatz) .Ener () .Append ("P") .Text (Funktion (d) {return "Ich kann bis zu" + d;}) .Style ("Farbe", Funktion (d) {if (d> 15) {// // Thresold “}}}} {{{{// Thresold“}); </script> </body> </html>Die von dieser einfachen Demo implementierten Funktionen sind: Fügen Sie dem Körper P -Tags hinzu, fügen Sie den von D3 geladenen Textinhalt in das P -Tag hinzu und passen Sie die Textfarbe gemäß den Funktionen der Funktionseinstellung an.
Der oben genannte Webseitencode und der JS -Code im Körper sind Datenvorgänge auf der Seite. Für viele Beispiele in Zukunft ändern Sie diesen Teil einfach und andere Teile können als Seitenrahmen angesehen werden.
Der vorherige Artikel hier spricht im Allgemeinen über die Verwendung der D3-Konjunktion, um schrittweise Datenvorgänge desselben Objekts für eine einfache Wartung zu verbinden.
D3.Select ("Körper") Wählen Sie das Körperelement aus und verkettet es mit der nächsten Methode
.Selectall ("P") Wählen Sie alle Absätze aus
.Data (Datensatz) analysiert die Ladearray -Daten. Die Länge des Arrays beträgt 5. Jede verkettete Methode wird in Zukunft fünfmal ausgeführt. Führen Sie Methodenoperationen in den Array -Elementen nach dem Array -Index nach.
.Ener () erstellt ein Platzhalterelement für die neuen gebundenen Daten (entspricht 5 vorübergehend unbekannte Tags).
Die Anzahl der erstellten Zahlen sollte basierend auf der Anzahl der ausgewählten vorhandenen Tags und der Länge des geladenen Datenarrays ermittelt werden.
Wie in diesem Beispiel, wenn es weniger als 5 P -Tags im Körper gibt, wird es erstellt (jetzt ist P im Körper 0, also werden 5 erstellt).
Wenn mehr als es nicht erstellt wird, muss die Gesamtzahl des letzten Platzhalterelements und des P -Elements 5 sein.
.Append ("p") Ändern Sie das Platzhalterelement in ein P -Element
.Text (Funktion (d) {}) Schreiben Sie eine anonyme Funktion, um den Inhalt der einzelnen Absätze anzeigen und im Allgemeinen eine Zeichenfolge zurückgeben. In dieser Methode können Sie es trotzdem schreiben.
In diesem Beispiel kann er ausgeben. Ich kann bis zu jedem Absatz plus dem entsprechenden Array -Elementwert zählen
Das Funktionsformat ist festgelegt. Nur auf diese Weise können die Daten in die Funktion geladen werden.
.Style ("Farbe", "") legt das Textfarbenattribut von CSS fest. Wie bei Text können die festgelegten Zeichenfolgen mit Funktion zur Ausführung der gewünschten Vorgänge durchgeführt werden. Wenn der entsprechende eingehende Wert des Absatzes größer als 15 ist, wird die Linie rot
Schließlich ist der Effekt, den wir sehen, wie in der Abbildung dargestellt:
Dieser Artikel endet mit diesem Artikel. Im Folgenden zeichnen Kreise in SVG und ein einfaches Kraftdiagramm, das Kreise verbindet.