Erfahren Sie, wie Sie mit D3 ein Balkendiagramm erstellen - Ein Tutorial für Anfänger

D3.js ist die beliebteste JavaScript-Bibliothek zum Erstellen visueller Darstellungen Ihrer Daten. Es ist jedoch etwas schwierig zu lernen, daher denke ich, dass es wichtig ist, sanft anzufangen.

In diesem Tutorial erfahren Sie, wie Sie mit D3 Ihr erstes Balkendiagramm erstellen. Es gibt Ihnen eine Einführung in die wichtigsten Konzepte, während Sie trotzdem Spaß daran haben, etwas zu bauen.

Wir haben auch einen kostenlosen D3.js-Kurs für Scrimba erstellt. Schau es dir hier an.

Jetzt fangen wir an.

Die Einrichtung

Wir verwenden das einfachste Setup, indem wir einfach die D3-Bibliothek von einem CDN importieren.

Wir werden unseren D3-Code in das Skript-Tag schreiben. Zweitens haben wir dem DOM ein Element hinzugefügt . Wenn Sie beim Lesen dieses Tutorials mit dem Code herumspielen möchten, schauen Sie sich diesen Scrimba-Spielplatz an, der die endgültige Version des Codes enthält.

Das erste, was wir tun werden, ist, dieses Element auszuwählen und es ein wenig zu stylen.

var svgWidth = 500; var svgHeight = 300; var svg = d3.select('svg') .attr("width", svgWidth) .attr("height", svgHeight) .attr("class", "bar-chart"); 

Wir geben ihm eine Breite und Höhe plus eine .bar-chartKlasse. In unserem CSS haben wir die Klasse folgendermaßen gestaltet:

.bar-chart { background-color: #C7D9D9; } 

Hier ist das Ergebnis:

Jetzt haben wir einen schönen SVG-Container, in dem wir unser Balkendiagramm zeichnen können. Der Code dafür ist etwas komplex. Schauen wir uns also zuerst das Ganze an und gehen dann die einzelnen Schritte durch:

var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160]; var barPadding = 5; var barWidth = (svgWidth / dataset.length); var barChart = svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("y", function(d) { return svgHeight - d }) .attr("height", function(d) { return d; }) .attr("width", barWidth - barPadding) .attr("transform", function (d, i) { var translate = [barWidth * i, 0]; return "translate("+ translate +")"; }); 

Wählen Sie Alle()

Das erste, was wir tun, mag etwas seltsam erscheinen .selectAll("rect"), aber wir haben noch keine Elemente erstellt. Diese Methode gibt also eine leere Auswahl (ein leeres Array) zurück. Wir werden jedoch bald Elemente mit erstellen enter().append().

Dies könnte etwas verwirrend erscheinen. Die Erklärung, wie selectAll()in Kombination mit funktioniert, enter().append()liegt jedoch außerhalb des Rahmens dieses Lernprogramms. Wenn Sie es richtig verstehen wollen, lesen Sie diesen Artikel sehr sorgfältig.

Daten()

Anschließend verketten wir die data()Methode und übergeben unseren Datensatz. Die Daten bestimmen am Ende die Höhe jedes Balkens.

eingeben()

Der nächste Schritt besteht darin, die enter()Methode zu verketten . Sie sehen enter()sich sowohl den Datensatz an, den Sie übergeben haben, data()  als auch die Auswahl, mit der wir gearbeitet haben selectAll('rect'), und versuchen dann, nach „Übereinstimmungen“ zu suchen. So wird eine Zuordnung zwischen Ihren Daten und dem DOM erstellt.

Denken Sie jedoch daran, dass die selectAll('rect')Methode eine leere Auswahl zurückgegeben hat, da das DOM noch keine Elemente enthält. Der Datensatz enthält jedoch neun Elemente. Es gibt also keine "Übereinstimmungen".

Mit dieser enter()Methode können Sie dann für jedes Element im Dataset, für das noch kein entsprechendes Element vorhanden ist , ein neues Element im DOM erstellen .

append ()

In der nächsten Zeile fügen wir für jedes Element ein Element hinzu. Wie diese Methode später folgt enter(), wird sie tatsächlich neun Mal ausgeführt, eine für jeden Datenpunkt, dem im DOM eine entsprechende fehlt .

attr ()

Der nächste Schritt besteht darin, die Form jedes der Rechtecke (unserer Balken) zu bestimmen. Wir müssen ihm vier Attribute geben: Höhe, Breite, x-Position und y-Position . Wir werden die attr()Methode für all diese verwenden.

Beginnen wir mit der y-Position:

.attr("y", function(d) { return svgHeight - d }) 

Der erste Parameter bestimmt, welches Attribut wir hinzufügen möchten: in diesem Fall die y-Koordinate des Balkens. Im zweiten Schritt erhalten wir Zugriff auf eine Rückruffunktion, in der wir den Wert zurückgeben, den unser Attribut haben soll.

Hier erhalten wir in diesem Schritt des Iterationsprozesses Zugriff auf den Datenpunkt (denken Sie daran, dass diese Methode einmal pro Element im datasetArray aufgerufen wird ). Der Datenpunkt wird im dArgument gespeichert . Wir subtrahieren dann den angegebenen Datenpunkt dvon der Höhe unseres SVG-Containers.

X- und Y-Koordinaten werden immer ab der oberen linken Ecke berechnet. Wenn wir also die Höhe des Containers mit dem dWert subtrahieren , erhalten wir die y-Koordinate für den oberen Rand des Balkens.

Damit sich der Balken von diesem Punkt bis zum Boden des SVG-Containers erstreckt, müssen Sie ihm eine Höhe geben, die dem Wert des Datenpunkts entspricht:

.attr("height", function(d) { return d; }) 

Der nächste Schritt besteht darin, ihm eine Breite zu geben:

.attr ("width", barWidth - barPadding)

Hier übergeben wir einfach einen einfachen Ausdruck im Gegensatz zur Rückruffunktion, da wir keinen Zugriff auf den Datenpunkt benötigen. Wir nehmen einfach eine Basis in der barWidthVariablen, die wir weiter oben erstellt haben. Dies ist die Gesamtbreite des Containers geteilt durch die Anzahl der Balken. Um eine kleine Lücke zwischen den einzelnen Balken zu erhalten, subtrahieren wir auch die Polsterung, die wir als 5 definiert haben.

Der letzte Schritt besteht darin, die x-Koordinaten festzulegen. Dieser Ausdruck ist etwas komplexer:

.attr("transform", function (d, i) { var xCoordinate = barWidth * i; return "translate("+ xCoordinate +")"; }); 

Hier nutzen wir zunächst einen zweiten Parameter im Rückruf i. Dies ist der Index des angegebenen Elements im Array.

To set the coordinate for each of the bars, we’ll simply multiply the index with the barWidth variable. We’ll then return a string value which describes the transformation for the x-axis, for example "translate(100)". That would push the bar 100 pixels to the right.

And just like that, you have your very first bar chart in D3.js.

If you’re interested in learning more about D3.js, be sure to check out our free course on Scrimba.

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.