Für das heutige Tutorial werden wir mit dem Entwerfen und Erstellen von Balkendiagrammen mit D3.js beginnen. Lesen Sie weiter, damit Sie wissen, wie es geht
Was ist D3.js?
D3.js ist eine datengesteuerte JavaScript-Bibliothek zum Bearbeiten von DOM-Elementen.
„Mit D3 können Sie Ihre Daten mithilfe von HTML, SVG und CSS zum Leben erwecken. Der Schwerpunkt von D3 auf Webstandards bietet Ihnen alle Funktionen moderner Browser, ohne an ein proprietäres Framework gebunden zu sein. Dabei werden leistungsstarke Anzeigekomponenten und ein datengesteuerter Ansatz zur DOM-Manipulation kombiniert. - d3js.org
Warum sollten Sie Diagramme mit D3.js erstellen? Warum nicht einfach ein Bild zeigen?
Nun, die Diagramme basieren auf Informationen von Ressourcen von Drittanbietern, die während der Verarbeitungszeit eine dynamische Anzeige erfordern. Außerdem ist SVG ein sehr leistungsfähiges Tool, das für diesen Anwendungsfall gut geeignet ist.
Machen wir einen Umweg, um zu sehen, welche Vorteile die Verwendung von SVG bietet.
Die Vorteile von SVG
SVG steht für Scalable Vector Graphics, eine technisch XML-basierte Markup-Sprache.
Es wird häufig verwendet, um Vektorgrafiken zu zeichnen, Linien und Formen anzugeben oder vorhandene Bilder zu ändern.
Vorteile:
- Kompatibel mit allen gängigen Browsern
- Hat DOM-Schnittstelle, benötigt keine Drittanbieter-Bibliothek
- Skalierbar, kann eine hohe Auflösung beibehalten
- Reduzierte Größe im Vergleich zu anderen Bildformaten.
Nachteile:
- Es können nur zweidimensionale Bilder angezeigt werden.
- Lange Lernkurve
- Das Rendern kann bei rechenintensiven Vorgängen zeitaufwändig sein.
- Trotz seiner Nachteile ist SVG ein großartiges Werkzeug zum Anzeigen von Symbolen, Logos, Illustrationen oder in diesem Fall Grafiken.
Beginnend mit D3.js.
Ich habe mich zunächst für das Balkendiagramm entschieden, da es eine visuelle Darstellung mit geringer Komplexität darstellt, während die grundlegende D3.js-Anwendung selbst unterrichtet wird. Dies sollte Sie nicht täuschen, D3 bietet eine Reihe großartiger Tools zur Visualisierung von Daten.
Ein Balkendiagramm kann je nach Ausrichtung horizontal oder vertikal sein. Ich werde mit dem Säulendiagramm alias vertikal gehen.
In diesem Diagramm werde ich die 10 beliebtesten Programmiersprachen zeigen, die auf dem Ergebnis der 2018 Stack Overflow Developer Survey basieren.
Zeit zum Zeichnen!
SVG hat ein Koordinatensystem, das in der oberen linken Ecke beginnt (0; 0). Die positive x-Achse geht nach rechts, während die positive y-Achse nach unten geht. Daher muss die Höhe des SVG bei der Berechnung der y-Koordinate eines Elements berücksichtigt werden.
Ich möchte eine Grafik erstellen, die 1000 Pixel breit und 600 Pixel hoch ist.
Im obigen Codefragment wähle ich das erstellte Element in der HTML-Datei mit D3 select aus. Diese Auswahlmethode akzeptiert alle Arten von Auswahlzeichenfolgen 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 eine zusätzliche Polsterung verleiht. Füllung kann mit einem Element angewendet werden
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 ihren Wert zurückgibt. Der obige Code verschiebt einfach den Anfang des Diagramms an die Position (60; 60) der SVG.
Unterstützte 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 den Namen der Sprachen und deren Prozentsätzen enthält. Es ist jedoch wichtig zu erwähnen, dass D3.js verschiedene Datenformate unterstützt.
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 kann. Das einzig Wichtige ist, daraus ein Array zu erstellen. Beachten Sie, dass die Bibliothek ab Version 5.0 Versprechen anstelle von Rückrufen verwendet, um Daten zu laden. Dies ist keine abwärtskompatible Änderung.
Skalierung und Achsen
Fahren wir mit den Achsen des Diagramms fort. Achse zeichnen yIch muss die niedrigste und höchste Wertgrenze festlegen, die in diesem Fall 0 und 100 sind.
Ich arbeite in diesem Tutorial mit Prozentsätzen, aber es gibt Dienstprogrammfunktionen für andere Datentypen als Zahlen, die ich später erläutern werde.
Ich muss die Höhe des Graphen zwischen diesen beiden Werten zu gleichen Teilen teilen. Dafür erstelle ich eine sogenannte Skalierungsfunktion.
const yScale = d3.scaleLinear () .range ([height, 0]) .domain ([0, 100]);
Die lineare Skala ist der beliebteste Skalentyp. Konvertiert eine kontinuierliche Eingabedomäne in einen kontinuierlichen Ausgabebereich. Schauen Sie sich die Rangey-Domain-Methode an. Der erste nimmt die Länge an, die durch die Grenzen der Domänenwerte geteilt werden muss.
Denken Sie daran, dass das SVG-Koordinatensystem in der oberen linken Ecke beginnt, sodass der Bereich die Höhe als ersten Parameter und nicht Null verwendet.
Das Erstellen einer linken Achse ist so einfach wie das Hinzufügen einer weiteren 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.
const xScale = d3.scaleBand () .range ([0, width]) .domain (sample.map ((s) => s.language)) .padding (0.2) chart.append ('g') .attr ( 'transform', `translate (0, $ {height})`) .call (d3.axisBottom (xScale)); d3-js-tutorial-Balkendiagramm-Beschriftungen
Beachten Sie, dass ich scaleBand für die x-Achse verwende, um den Bereich in Bänder zu unterteilen und die Koordinaten und Breiten der Balken mit zusätzlicher Auffüllung zu berechnen.
D3.js kann unter anderem auch den Datumstyp verarbeiten. scaleTime ist scaleLinear sehr ähnlich, außer dass es sich bei der Domain hier um eine Reihe von Daten handelt.
Zeichnen von Balken in D3.js.
Überlegen Sie, welche Art von Eingabe wir benötigen, um die Balken zu zeichnen. Jedes stellt einen Wert dar, der mit einfachen Formen, insbesondere Rechtecken, dargestellt wird. Im folgenden Codeausschnitt hänge ich sie an das erstellte Gruppenelement an.
chart.selectAll () .data (Ziele) .enter () .append ('rect') .attr ('x', (s) => xScale (s.language)) .attr ('y', (s) => yScale (s.value)) .attr ('height', (s) => height - yScale (s.value)) .attr ('width', xScale.bandwidth ())
Zuerst verwenden Sie selectAll, um die Elemente im Diagramm auszuwählen, die mit einer leeren Ergebnismenge zurückgegeben werden. Dann die Datenfunktion, die angibt, wie viele Elemente das DOM basierend auf der Länge des Arrays aktualisiert werden soll. enter identifiziert fehlende Elemente, wenn die Dateneingabe länger als die Auswahl ist. Dies gibt eine neue Auswahl zurück, die die hinzuzufügenden Elemente darstellt. Normalerweise folgt ein Anhängeelement, das dem DOM Elemente hinzufügt.
Grundsätzlich fordere ich D3.js auf, für jedes Mitglied des Arrays ein Rechteck hinzuzufügen.
Jetzt werden nur noch Rechtecke übereinander hinzugefügt, die weder Höhe noch Breite haben. Diese beiden Attribute müssen berechnet werden, und hier bieten sich wieder Skalierungsfunktionen an.
Schau, ich füge die Koordinaten der Rechtecke mit dem aufgerufenen attr hinzu. Der zweite Parameter kann ein Rückruf sein, der drei Parameter akzeptiert: das tatsächliche Element der Eingabedaten, seinen Index und die gesamte Eingabe.
.attr ('x', (aktuell, Index, Array) => xScale (aktuell.Wert))
Die Skalierungsfunktion gibt die Koordinate für einen bestimmten Domänenwert zurück. Das Berechnen der Koordinaten ist ein Kinderspiel, der Trick liegt in der Höhe des Balkens. Die berechnete y-Koordinate muss von der Höhe des Diagramms abgezogen werden, um die korrekte Darstellung des Werts als Spalte zu erhalten.
Ich definiere die Breite der Rechtecke mit der Skalierungsfunktion. Auch scaleBand hat eine Bandbreitenfunktion, die die berechnete Breite für ein Element basierend auf dem Füllsatz zurückgibt.
d3-js-tutorial-Balkendiagramm-mit-Javascript herausgezogen
Gute Arbeit, aber nicht so schick, oder?
Um zu verhindern, dass sich unser Publikum langweilt, fügen wir Informationen hinzu und verbessern die Bilder, damit Ihre Grafik viel besser aussieht!
