Ingenieur bei RisingStack, interessiert an JS, Golang,. NET Core.
Kürzlich hatten wir das Vergnügen, an einem maschinellen Lernprojekt teilzunehmen, an dem Bibliotheken wie React und D3 beteiligt sind.js. Unter vielen Aufgaben habe ich einige Diagramme entwickelt, die helfen, das Ergebnis von ML-Modellen wie Naive Bayes in Form eines Liniendiagramms oder eines gruppierten Balkendiagramms zu verarbeiten.,
In diesem Artikel möchte ich meine Fortschritte mit D3.js so weit und zeigen die grundlegende Nutzung der Bibliothek durch das einfache Beispiel eines Balkendiagramms.
Nachdem Sie diesen Artikel gelesen haben, erfahren Sie, wie Sie D3 erstellen.js charts wie dieses leicht:
Der vollständige Quellcode ist hier verfügbar.
Wir bei RisingStack lieben das JavaScript-Ökosystem, das Backend und die Frontend-Entwicklung. Persönlich interessiere ich mich für beide., Im Backend kann ich die zugrunde liegende Geschäftslogik einer Anwendung durchschauen, während ich auch die Möglichkeit habe, großartig aussehende Dinge im Frontend zu erstellen. Das ist, wo D3.js kommt ins Bild!
Update: ein 2.Teil meiner d3.js Tutorial-Serie ist ebenfalls verfügbar: Erstellen eines D3.js Calendar Heatmap (zur Visualisierung von StackOverflow-Nutzungsdaten)
Was ist D3?js?
D3.js ist eine datengesteuerte JavaScript-Bibliothek zum Bearbeiten von DOM-Elementen.
“ D3 hilft Ihnen, Daten mit HTML, SVG und CSS zum Leben zu erwecken., Der Schwerpunkt von D3 auf Webstandards bietet Ihnen die vollen Funktionen moderner Browser, ohne sich an ein proprietäres Framework zu binden, das leistungsstarke Visualisierungskomponenten und einen datengesteuerten Ansatz zur DOM-Manipulation kombiniert.“- d3js.org
Warum sollten Sie Diagramme mit D3 erstellen?js an erster Stelle? Warum nicht einfach ein Bild anzeigen?
Nun, Diagramme basieren auf Informationen aus Ressourcen von Drittanbietern, die während der Renderzeit dynamisch visualisiert werden müssen. Außerdem ist SVG ein sehr leistungsfähiges Werkzeug, das gut zu diesem Anwendungsfall passt.,
Machen wir einen Umweg, um zu sehen, welche Vorteile wir durch die Verwendung von SVG erzielen können.
Die Vorteile von SVG
SVG steht für skalierbare Vektorgrafiken, die technisch eine XML-basierte Markup-Sprache sind.
Es wird häufig verwendet, um Vektorgrafiken zu zeichnen, Linien und Formen anzugeben oder vorhandene Bilder zu ändern. Die Liste der verfügbaren Elemente finden Sie hier.
Pros:
- Unterstützt in allen gängigen browsern;
- Es hat DOM interface, erfordert keine dritte-party lib;
- Skalierbare, es kann halten hohe auflösung;
- Reduziert größe im vergleich zu anderen bild formate.,
Nachteile:
- Es können nur zweidimensionale Bilder angezeigt werden;
- Lange Lernkurve;
- Das Rendern kann bei rechenintensiven Operationen lange dauern.
Trotz seiner Nachteile ist SVG ein großartiges Werkzeug, um Symbole, Logos, Illustrationen oder in diesem Fall Diagramme anzuzeigen.
Erste Schritte mit D3.js
Ich habe Balkendiagramm ausgewählt, um loszulegen, da es ein visuelles Element mit geringer Komplexität darstellt, während es die grundlegende Anwendung von D3 lehrt.js selbst. Dies sollte Sie nicht täuschen, D3 bietet eine Reihe großartiger Tools zur Visualisierung von Daten., Schauen Sie sich die github-Seite für einige wirklich schöne Anwendungsfälle!
Ein Balkendiagramm kann basierend auf seiner Ausrichtung horizontal oder vertikal sein. Ich werde mit dem vertikalen gehen, auch bekannt als Spaltendiagramm.
In diesem Diagramm werde ich die 10 beliebtesten Programmiersprachen basierend auf dem 2018 Developer Survey-Ergebnis von Stack Overflow anzeigen.
Zeit zum zeichnen!
SVG hat ein Koordinatensystem, das von der oberen linken Ecke (0;0) ausgeht. Die positive x-Achse geht nach rechts, während die positive y-Achse nach unten geht., Somit muss bei der Berechnung der y-Koordinate eines Elements die Höhe des SVG berücksichtigt werden.
Das ist genug Hintergrundprüfung, lass uns Code schreiben!
Ich möchte ein Diagramm mit 1000 Pixel Breite und 600 Pixel Höhe erstellen.
<body><svg /></body><script> const margin = 60; const width = 1000 - 2 * margin; const height = 600 - 2 * margin; const svg = d3.select('svg');</script>Im obigen Codeausschnitt wähle ich das erstellte <svg> Element in der HTML-Datei mit d3 selectaus. Diese Auswahlmethode akzeptiert alle Arten von Selektorzeichenfolgen und gibt das erste übereinstimmende Element zurück., Verwenden Sie selectAll, wenn Sie alle erhalten möchten.
Ich definiere auch einen Randwert, der dem Diagramm ein wenig mehr Auffüllung verleiht. Das Auffüllen kann mit einem <g> – Element angewendet werden, das durch den gewünschten Wert übersetzt wird. Von nun an zeichne ich auf diese Gruppe, um einen gesunden Abstand zu anderen Inhalten der Seite zu halten.
const chart = svg.append('g') .attr('transform', `translate(${margin}, ${margin})`);Das Hinzufügen von Attributen zu einem Element ist so einfach wie das Aufrufen der attr – Methode. Der erste Parameter der Methode verwendet ein Attribut, das ich auf das ausgewählte DOM-Element anwenden möchte., Der zweite Parameter ist der Wert oder eine Rückruffunktion, die den Wert zurückgibt. Der obige Code verschiebt einfach den Anfang des Diagramms an die (60;60) Position des SVG.
Unterstützt D3.js eingabeformate
Um mit dem Zeichnen zu beginnen, muss ich die Datenquelle definieren, aus der ich arbeite. Für dieses Tutorial verwende ich ein einfaches JavaScript-Array, das Objekte mit dem Namen der Sprachen und ihren prozentualen Raten enthält, aber es ist wichtig, diesen Wert zu erwähnen.js unterstützt mehrere Datenformate.
Die Bibliothek verfügt über integrierte Funktionen zum laden von XMLHttpRequest .csv-Dateien, Textdateien usw., Jede dieser Quellen kann Daten enthalten, die D3.js verwenden können, ist die einzige wichtige Sache, ein Array aus ihnen zu konstruieren. Beachten Sie, dass die Bibliothek ab Version 5.0 Versprechungen anstelle von Rückrufen zum Laden von Daten verwendet, was eine nicht abwärtskompatible Änderung darstellt.
Skalierung, Achsen
Fahren wir mit den Achsen des Diagramms fort. Um die y-Achse zu zeichnen, muss ich die niedrigste und die höchste Wertgrenze festlegen, die in diesem Fall 0 und 100 sind.
Ich arbeite in diesem Tutorial mit Prozentsätzen, aber es gibt andere Hilfsfunktionen für Datentypen als Zahlen, die ich später erläutern werde.,
Ich muss die Höhe des Diagramms zwischen diesen beiden Werten in gleiche Teile aufteilen. Dazu erstelle ich etwas, das als Skalierungsfunktion bezeichnet wird.
const yScale = d3.scaleLinear() .range() .domain();Die lineare Skalierung ist der am häufigsten bekannte Skalierungstyp. Er wandelt einen kontinuierlichen Eingangsbereich in einen kontinuierlichen Ausgangsbereich um. Beachten Sie die Methode range und domain. Die erste nimmt die Länge an, die zwischen den Grenzen der Domänenwerte aufgeteilt werden soll.,
Denken Sie daran, das SVG-Koordinatensystem beginnt in der oberen linken Ecke, weshalb der Bereich die Höhe als ersten Parameter und nicht Null annimmt.
Das Erstellen einer Achse auf der linken Seite ist so einfach wie das Hinzufügen einer anderen Gruppe und das Aufrufen der axisLeft – Methode von d3 mit der Skalierungsfunktion als Parameter.
chart.append('g') .call(d3.axisLeft(yScale));Fahren Sie nun mit der x-Achse fort.
Beachten Sie, dass ich scaleBand für die x-Achse verwende, um den Bereich in Bänder aufzuteilen und die Koordinaten und Breiten der Balken mit zusätzlicher Auffüllung zu berechnen.
D3.,js ist auch in der Lage, Datumstyp unter vielen anderen zu handhaben. scaleTime ist scaleLinear wirklich ähnlich, außer dass die Domäne hier ein Array von Daten ist.
Zeichnen von Balken in D3.js
Überlegen Sie, welche Art von Eingabe wir zum Zeichnen der Balken benötigen. Sie stellen jeweils einen Wert dar, der mit einfachen Formen, insbesondere Rechtecken, veranschaulicht wird. Im nächsten Codeausschnitt hänge ich sie an das erstellte Gruppenelement an.
Zuerst habe ich selectAll Elemente im Diagramm, die mit einer leeren Ergebnismenge zurückgegeben werden., Dann gibt die Funktion data an, mit wie vielen Elementen das DOM basierend auf der Array-Länge aktualisiert werden soll. enter identifiziert Elemente, die fehlen, wenn die Dateneingabe länger als die Auswahl ist. Dies gibt eine neue Auswahl zurück, die die Elemente darstellt, die hinzugefügt werden müssen. Normalerweise folgt darauf eine append die dem DOM Elemente hinzufügt.
Grundsätzlich sage ich D3.js zum Anhängen eines Rechtecks für jedes Mitglied des Arrays.
Jetzt werden nur noch Rechtecke übereinander hinzugefügt, die keine Höhe oder Breite haben., Diese beiden Attribute müssen berechnet werden und hier sind die Skalierungsfunktionen wieder nützlich.
Siehe, ich füge die Koordinaten der Rechtecke mit dem Aufruf attr hinzu. Der zweite Parameter kann ein Rückruf sein, der 3 Parameter verwendet: das tatsächliche Mitglied der Eingabedaten, dessen Index und die gesamte Eingabe.
.attr(’x’, (actual, index, array) => xScale(actual.value))Die Skalierungsfunktion gibt die Koordinate für einen bestimmten Domänenwert zurück. Berechnung der Koordinaten sind ein Stück Kuchen, der Trick ist mit der Höhe der Bar., Die berechnete y-Koordinate muss von der Höhe des Diagramms subtrahiert werden, um die korrekte Darstellung des Werts als Spalte zu erhalten.
Ich definiere die Breite der Rechtecke auch mit der Skalierungsfunktion. scaleBand hat eine bandwidth Funktion, die die berechnete Breite für ein Element basierend auf dem eingestellten padding zurückgibt.
Netter Job, aber nicht so schick, oder?
Um zu verhindern, dass unser Publikum Augenblutungen erleidet, fügen wir einige Informationen hinzu und verbessern die Grafik!, 😉
Tipps zum Erstellen von Balkendiagrammen
Es gibt einige Grundregeln mit Balkendiagrammen, die erwähnenswert sind.
- Vermeiden Sie 3D-Effekte;
- Bestellen Sie Datenpunkte intuitiv-alphabetisch oder sortiert;
- Abstand zwischen den Bändern halten;
- Starten Sie die y-Achse bei 0 und nicht mit dem niedrigsten Wert;
- Verwenden Sie konsistente Farben;
- Fügen Sie Achsenbeschriftungen, Titel und Quellzeile hinzu.
D3.js Grid System
Ich möchte die Werte hervorheben, indem ich Gitterlinien im Hintergrund hinzufüge.,
Experimentieren Sie mit vertikalen und horizontalen Linien, aber mein Rat ist, nur eine davon anzuzeigen. Übermäßige Linien können ablenken. Dieses Code-Snippet zeigt, wie beide Lösungen hinzugefügt werden.
Ich bevorzuge in diesem Fall die vertikalen Gitterlinien, weil sie die Augen führen und das Gesamtbild schlicht und einfach halten.
Beschriftungen in D3.js
Ich möchte das Diagramm auch umfassender gestalten, indem ich eine Textführung hinzufüge. Geben wir dem Diagramm einen Namen und fügen Beschriftungen für die Achsen hinzu.,
Texte sind SVG-Elemente, die an die SVG oder Gruppen angehängt werden können. Sie können mit x-und y-Koordinaten positioniert werden, während die Textausrichtung mit dem Attribut text-anchor. Um die Beschriftung selbst hinzuzufügen, rufen Sie einfach die Methode text für das Textelement auf.
Interaktivität mit D3.js
Wir haben ein ziemlich informatives Diagramm, aber es gibt immer noch Möglichkeiten, es auch interaktiv zu machen.
Im nächsten Codeblock zeige ich Ihnen, wie Sie SVG-Elementen Ereignis-Listener hinzufügen.,
Beachten Sie, dass ich anstelle einer Pfeilfunktion einen Funktionsausdruck verwende, da ich über das Schlüsselwort auf das Element zugreife.
Ich setze die Deckkraft des ausgewählten SVG-Elements beim Mauszeiger auf die Hälfte des ursprünglichen Werts und setze es zurück, wenn der Cursor den Bereich verlässt.
Sie können auch die Mauskoordinaten mit d3.mouse. Es gibt ein Array mit der x-und y-Koordinate zurück. Auf diese Weise wäre die Anzeige eines Tooltips an der Spitze des Cursors überhaupt kein Problem.
Das Erstellen von auffälligen Diagrammen ist keine einfache Kunstform.,
Man könnte die Weisheit von Grafikdesignern, UX-Forschern und anderen mächtigen Kreaturen erfordern. Im folgenden Beispiel werde ich ein paar Möglichkeiten zeigen, um Ihr Diagramm zu steigern!
Ich habe sehr ähnliche Werte auf dem Diagramm angezeigt, so dass die Divergenzen zwischen den Balkenwerten hervorzuheben, richte ich einen Ereignis-Listener für die mouseenter Ereignis. Jedes Mal, wenn der Benutzer mit der Maus über eine bestimmte a-Spalte fährt, wird eine horizontale Linie über dieser Leiste gezeichnet. Außerdem berechne ich auch die Unterschiede zu den anderen Bändern und zeige sie auf den Balken an.,
Ziemlich ordentlich, huh? Ich habe diesem Beispiel auch die Deckkraft hinzugefügt und die Breite des Balkens erhöht.
Dietransition – Methode gibt an, dass ich Änderungen am DOM animieren möchte. Sein Intervall wird mit der duration – Funktion festgelegt, die Millisekunden als Argumente verwendet. Dieser Übergang oben verblasst die Bandfarbe und erweitert die Breite des Balkens.
Um eine SVG-Linie zu zeichnen, benötige ich einen Start – und einen Zielpunkt., Dies kann über die Koordinaten x1, y1 und x2, y2 eingestellt werden. Die Zeile wird erst sichtbar, wenn ich die Farbe mit dem Attribut stroke.
ich habe nur gezeigt, Teil des mouseenter Fall hier also im Hinterkopf behalten, die Sie haben, zurücksetzen oder entfernen Sie die änderungen auf dem mouseout Ereignis. Der vollständige Quellcode ist am Ende des Artikels verfügbar.
Fügen wir dem Diagramm einen Stil hinzu!,
Mal sehen, was wir bisher erreicht haben und wie wir dieses Diagramm mit etwas Stil aufrütteln können. Sie können SVG-Elementen Klassenattribute mit derselben attr – Funktion hinzufügen, die wir zuvor verwendet haben.
Das Diagramm hat eine schöne Funktionalität. Anstelle eines stumpfen, statischen Bildes werden auch die Divergenzen zwischen den dargestellten Werten beim Mauszeiger angezeigt. Der Titel stellt das Diagramm in einen Kontext und die Beschriftungen helfen, die Achsen mit der Maßeinheit zu identifizieren. Ich füge auch unten rechts eine neue Beschriftung hinzu, um die Eingabequelle zu markieren.,
Das einzige, was übrig bleibt, ist die Farben und Schriftarten zu aktualisieren!
Diagramme mit dunklem Hintergrund lassen die hellen Balken cool aussehen. Ich habe auch die Open Sans – Schriftfamilie auf alle Texte angewendet und Größe und Gewicht für die verschiedenen Beschriftungen festgelegt.
Bemerken Sie, dass die Zeile gestrichelt wurde? Dies kann durch Festlegen der Attribute stroke-width und stroke-dasharray erfolgen. Mit stroke-dasharray können Sie Muster von Bindestrichen und Lücken definieren, die den Umriss der Form verändern.
Gitterlinien, wo es knifflig wird., Ich muss auf Pfadelemente in der Gruppe anwenden, um den Rahmen des Diagramms auszublenden, und ich reduziere auch ihre Sichtbarkeit, indem ich die Deckkraft der Linien festlege.
Alle anderen CSS-Regeln decken die Schriftgrößen und-farben ab, die Sie im Quellcode finden.
Einpacken unserer D3.js-Balkendiagramm Tutorial
D3.js ist eine erstaunliche Bibliothek für DOM-Manipulation. Die Tiefe verbirgt unzählige verborgene (eigentlich nicht verborgene, wirklich gut dokumentierte) Schätze, die auf Entdeckung warten., Dieses Schreiben deckt nur Fragmente seines Toolsets ab, die helfen, ein nicht so mittelmäßiges Balkendiagramm zu erstellen.
Mach weiter, erforsche es, benutze es und erstelle spektakuläre Visualisierungen!