d3.js
Robust, ansprechend und wieder verwendbar (r3) für d3

Einführung

Streudiagramm

Dieses Beispiel enthält insgesamt mehr als 1000 Codezeilen (zu viel, um hier eingebettet zu werden). Aus diesem Grund ist der gesamte Code unter http://blockbuilder.org/SumNeuron/956772481d4e625eec9a59fdb9fbe5b2 verfügbar (alternativ unter https://bl.ocks.org/SumNeuron/956772481d4e625eec9a59fdb9fbe5b2) . Beachten Sie, dass bl.ocks.org iframe verwendet. Um die Größenänderung zu sehen, klicken Sie auf die Schaltfläche Öffnen (untere rechte Ecke des iframe). Da es viel Code gibt, wurde er in mehrere Dateien aufgeteilt, und das entsprechende Codesegment wird sowohl nach Dateiname als auch nach Zeilennummer referenziert. Bitte öffnen Sie dieses Beispiel, während wir es durchgehen.

Was macht ein Diagramm aus?

Es gibt mehrere Kernkomponenten, die in ein vollständiges Diagramm einfließen. Dazu gehören nämlich:

• Titel
• Achsen
• Achsenbeschriftungen
• die Daten

Je nach Diagramm können andere Aspekte enthalten sein, z. B. eine Diagrammlegende. Viele dieser Elemente können jedoch mit dem Tooltip umgangen werden. Aus diesem Grund gibt es interaktive Diagramm-spezifische Elemente, z. B. Schaltflächen zum Wechseln zwischen Daten.

Da der Inhalt unseres Diagramms interaktiv ist, ist es angebracht, dass das Diagramm selbst dynamisch ist - z. B. Größe ändern, wenn sich die Fenstergröße ändert. SVG ist skalierbar, Sie können also die Skalierung Ihres Diagramms unter Beibehaltung der aktuellen Perspektive zulassen. Abhängig von der eingestellten Perspektive kann das Diagramm jedoch zu klein werden, um lesbar zu sein, selbst wenn noch genügend Platz für das Diagramm vorhanden ist (z. B. wenn die Breite größer als die Höhe ist). Daher kann es wünschenswert sein, das Diagramm nur in der verbleibenden Größe neu zu zeichnen.

In diesem Beispiel wird beschrieben, wie Sie die Platzierung der Schaltflächen, Titel, Achsen, Achsenbeschriftungen dynamisch berechnen und Datensätze mit unterschiedlichen Datenmengen behandeln

Konfiguration

Aufbau

Da wir die Wiederverwendung von Code anstreben, sollten wir eine Konfigurationsdatei erstellen, die globale Optionen für Aspekte unseres Diagramms enthält. Ein Beispiel für eine solche Konfigurationsdatei ist charts_configuration.json .

Wenn wir uns diese Datei ansehen, können wir feststellen, dass ich einige Elemente eingefügt habe, die bereits klar sein sollten, wenn wir unser Diagramm erstellen:

• Dateien (speichert die Zeichenfolge, in der sich unsere Diagrammdaten befinden)
• document_state (welche Schaltfläche ist aktuell für unser Diagramm ausgewählt)
• chart_ids (HTML-IDs für die Diagramme, die wir erstellen werden)
• svg (Optionen für das svg, zB Größe)
• plot_attributes
  • Titel (verschiedene Schriftattribute setzen)
  • Tooltip (verschiedene Tooltip-Stileigenschaften festlegen)
  • Achsen (verschiedene Schriftattribute setzen)
  • Schaltflächen (verschiedene Schrift- und Stilattribute festlegen)
• Handlungen
  • Streuung (verschiedene Aspekte unseres Streudiagramms einstellen, z. B. Punktradius)
• Farben (eine bestimmte Farbpalette, die verwendet werden soll)

Hilfsfunktionen

Neben dem Einrichten dieser globalen Aspekte müssen einige Hilfsfunktionen definiert werden. Diese finden Sie unter helpers.js

• ajax_json ( ajax_json Dateien entweder synchron oder asynchron laden)
• keys (gibt Schlüssel des gegebenen Objekts zurück - entspricht d3.keys ())
• parseNumber (eine allgemeine parseNumber falls wir nicht wissen, welcher Typ oder welche Nummer ist)
• typeofNumber (gibt den Nummerntyp zurück)

index.html

Zuletzt sollten wir unsere HTML-Datei einrichten. In diesem Beispiel werden wir unser Diagramm in ein section Tag einfügen, wobei die id mit der in der Konfigurationsdatei angegebenen id übereinstimmt (Zeile 37). Da Prozentsätze nur funktionieren, wenn sie von ihrem übergeordneten Mitglied berechnet werden können, enthalten wir auch einige Grundstile (Zeilen 19-35).

Unser Streudiagramm erstellen

Lassen Sie uns make_scatter_chart.js öffnen. Lassen Sie uns nun auf Zeile 2 achten, in der viele der wichtigsten Variablen vordefiniert sind:

• svg - d3 Auswahl der svg des Diagramms
• chart_group - d3 Auswahl der Gruppe innerhalb der SVG, in der die Daten platziert werden
• Canvas - Kernaspekte des SVG-Extrakts für mehr Komfort
• Margen - die Margen müssen wir berücksichtigen
• maxi_draw_space die größten x- und y-Werte, in denen wir unsere Daten zeichnen können
• doc_state - der aktuelle Status des Dokuments, wenn wir Schaltflächen verwenden (in diesem Beispiel sind wir dies)

Möglicherweise haben Sie bemerkt, dass wir die SVG-Datei nicht in die HTML-Datei aufgenommen haben. Deshalb müssen wir, bevor wir etwas mit unserem Diagramm tun können, die svg zu index.html hinzufügen, falls sie noch nicht existiert. Dies wird in der Datei make_svg.js durch die Funktion make_chart_svg . Wenn Sie make_svg.js , sehen wir, dass wir in der Diagrammkonfiguration die parseNumber für die Breite und Höhe der parseNumber . Wenn es sich bei der Zahl um einen Float handelt, wird die Breite und Höhe des SVG proportional zur Breite und Höhe des Abschnitts. Wenn es sich bei der Zahl um eine Ganzzahl handelt, wird sie nur auf diese Ganzzahlen gesetzt.

Zeile 6 - 11 prüft, ob es wirksam ist - ob dies der erste Aufruf ist oder nicht, und legt die chart_group (und den Dokumentstatus, wenn es sich um den ersten Aufruf handelt) fest.

Zeile 14 - 15 extrahiert die aktuell ausgewählten Daten durch Klicken auf die Schaltfläche; Zeile 16 legt data_extent . Während d3 eine Funktion zum Extrahieren des Datenbereichs hat, ziehe ich es vor, den Datenbereich in dieser Variablen zu speichern.

Die Zeilen 27 - 38 enthalten die Magie, durch die die Ränder, die Schaltflächen, der Titel und die Achsen erstellt werden. Diese sind alle dynamisch bestimmt und wirken ein wenig komplex, so dass wir uns nacheinander anschauen.

make_margins (in make_margins.js)

Wir können sehen, dass das Rands-Objekt etwas Platz auf der linken, rechten, oberen und unteren Seite des Diagramms (x.left, x.right, y.top, y.bottom), den Titel, die Schaltflächen und die Äxte

Wir sehen auch, dass die Achsenränder in Zeile 21 aktualisiert werden.

Warum machen wir das? Wenn wir nicht die Anzahl der Ticks angeben, der Tick die Tickgröße und die Schriftgröße des Ticklabels, können wir die Größe nicht berechnen, die die Achsen benötigen. Selbst dann müssten wir noch den Abstand zwischen den Tick-Labels und den Ticks schätzen. Daher ist es einfacher, einige Dummy-Achsen mit unseren Daten zu erstellen, zu sehen, wie groß die entsprechenden svg-Elemente sind, und dann die Größe zurückzugeben.

Wir brauchen eigentlich nur die Breite der Y-Achse und die Höhe der X-Achse, die in Achsen.y und Achsen.x gespeichert ist.

Mit unseren Standardrändern berechnen wir dann den max_drawing_space (Zeilen 29-34 in make_margins.js).

make_buttons (in make_buttons.js)

Die Funktion erstellt eine Gruppe für alle Schaltflächen und dann eine Gruppe für jede Schaltfläche, die wiederum einen Kreis und ein Textelement speichert. Zeile 37 - 85 berechnet die Position der Tasten. Dies geschieht, indem Sie sehen, ob der Text rechts von jeder Schaltfläche länger ist als der Platz, den wir einzeichnen können (Zeile 75). Wenn dies der Fall ist, wird die Schaltfläche um eine Zeile nach unten verschoben und die Ränder werden aktualisiert.

make_title (in make_title.js)

make_title ähnelt make_buttons dahingehend, dass der Titel Ihres Diagramms automatisch in mehrere Zeilen aufgeteilt wird und bei Bedarf ein Bindestrich ist. Es ist ein bisschen hackig, da es nicht die Komplexität des TeX-Trennungsschemas besitzt, aber es funktioniert ausreichend gut. Wenn wir mehr Zeilen als eine benötigen, werden die Ränder aktualisiert.

Wenn die Schaltflächen, Titel und Ränder festgelegt sind, können wir unsere Achsen erstellen.

make_axes (in make_axes.js)

Die Logik von make_axes spiegelt die zur Berechnung des Platzbedarfs der Dummy-Achsen wider. Hier werden jedoch Übergänge hinzugefügt, um zwischen den Achsen zu wechseln.

Zum Schluss unser Streudiagramm

Wenn alles fertig ist, können wir endlich unser Streudiagramm erstellen. Da unsere Datensätze eine unterschiedliche Anzahl von Punkten aufweisen können, müssen wir dies berücksichtigen und die Eintritts- und Beendigungsereignisse von d3 entsprechend nutzen. Die Anzahl der bereits vorhandenen Punkte wird in Zeile 40 ermittelt. Die if-Anweisung in Zeile 45 - 59 fügt mehr Kreiselemente hinzu, wenn mehr Daten vorhanden sind, oder übergibt die zusätzlichen Elemente in eine Ecke und entfernt sie, wenn zu viele vorhanden sind.

Sobald wir wissen, dass wir die richtige Anzahl von Elementen haben, können wir alle verbleibenden Elemente an ihre korrekte Position bringen (Zeile 64).

Zuletzt fügen wir Tooltip in Zeile 67 und 68 hinzu. Die Tooltip-Funktion befindet sich in make_tooltip.js

Box- und Whisker-Chart

Um den Wert der Erstellung verallgemeinerter Funktionen wie im vorherigen Beispiel (make_title, make_axes, make_buttons usw.) darzustellen, beachten Sie dieses Kästchen und dieses Whisker-Diagramm: https://bl.ocks.org/SumNeuron/262e37e2f932cf4b693f241c52a410ff

Während der Code zum Erstellen der Boxen und Whiskers intensiver ist als das einfache Platzieren der Punkte, sehen wir, dass dieselben Funktionen perfekt funktionieren.

Balkendiagramm

https://bl.ocks.org/SumNeuron/7989abb1749fc70b39f7b1e8dd192248