t3n 38

Big Data im Netz visualisieren: So funktioniert die JavaScript-Bibliothek D3

Seite 3 / 3

DAS DIAGRAMM ZEICHNEN

Dem SVG-Element wird zunächst ein Element g hinzugefügt. Letzterem werden die Klassen axis und abscissa mitgegeben, über die es dann per CSS gestylt werden kann. Mit Hilfe des transform-Attributes erfolgt die Positionierung der x-Achse innerhalb des Diagramms. Da die zugehörigen Labels recht lang sind, ist es sinnvoll, diese leicht zu drehen und mit etwas Abstand zur Achse zu positionieren. Die abschließend aufgerufene Funktion call() mit der Variablen abscissa wendet die vorherigen Funktionen auf die jeweilige Achse an.

Das Zeichnen der y-Achse ist in diesem Fall weniger umfangreich zu beschreiben, da die Labels nicht positioniert werden müssen. Es genügt, die entsprechenden Argumente auszutauschen. Die Aufteilung und Beschriftung der Achse(n) wird vollständig von D3.js übernommen.

APP.JS: ZEICHNEN DER ACHSEN

...
// Zeichnen der x-Achse
svg.append("g")
   .attr("class", "axis abscissa")
   .attr("transform", 
 "translate(0, "+ (height - bottomPadding)+")")
   .call(abscissa) 

 // Positionierung der Label
   .selectAll("text")
   .style("text-anchor", "end")
   .attr("dx", "-.5em")
   .attr("dy", ".15em")
   .attr("transform", function(d) 
    { return "rotate(-25)" }
    );

// Zeichnen der y-Achse
svg.append("g")
   .attr("class", "axis ordinate")
   .attr("transform", "translate("+(leftPadding)+", 0)")
   .call(ordinate);
...

Listing 11

Damit ist alles bereit, um das Diagramm zu zeichnen. Um die einzelnen Werte innerhalb einer Säule als SVG-Text anzeigen zu können, wird ein Objekt namens barChart erstellt. Dieses enthält den Funktionsaufruf selectAll("rect"), der im SVG-Objekt alle übergebenen Rechtecke auswählt. Der Funktion data() werden die Daten zur Verfügung gestellt, und enter() gibt nun genau die zuvor selektierten Elemente zurück.

Dem barChart-Objekt fügt man nun mittels append("rect") die Säulen auf Basis der Daten hinzu. Das Class-Attribut erleichtert auch hier späteres Styling. Schließlich gilt es noch, die Positionierung zu x- und y-Achse vorzunehmen und die Breite der Säulen mit der Funktion x.rangeBand() zuzuordnen.

Um dem Diagramm Dynamik zu verleihen, werden die Säulen noch mit transition() animiert. Ziel ist es, sie von der x-Achse aus zeitversetzt zu ihrem jeweiligen Maximalwert anwachsen zu lassen. Dazu erhalten die Säulen vor dem Aufruf der Animation eine Höhe von 0. Die Funktion delay() ist für die Verzögerung der Animation zuständig, duration() bestimmt die Dauer in Millisekunden.

Per CSS lassen sich die Säulen, der Text und die Achsen des Diagramms individuell gestalten. (Grafik: t3n)
Per CSS lassen sich die Säulen, der Text und die Achsen des Diagramms individuell gestalten. (Grafik: t3n)

Abschließend gilt es noch, SVG-Text für die Werte in den Säulen mit Hilfe von .append("text") zu ergänzen. Hierzu werden die Zahlenwerte zunächst zu den Achsen und Säulen positioniert. Da die meisten D3-Elemente gleichzeitig Objekte und Funktionen sind, lassen sich hier die anfangs definierten Variablen x und y für die Positionierung nutzen, zum Beispiel mit return x(d.channel). Nach der Ausrichtung des Textankers fehlt nur noch die Textausgabe, welche die Aufgabe der Funktion text() ist.

APP.JS: ZEICHNEN DES DIAGRAMMS

...
var barChart = svg.selectAll("rect")
    .data(data)
    .enter();

// Säulendiagramm zeichnen
barChart.append("rect")
   .attr("class", "bar")
   .attr("x", function(d) { return x(d.channel); })
   .attr("y", height - bottomPadding )
   .attr("width", x.rangeBand())
   .attr("height", 0)

// Animation der Balkenhöhe
   .transition()
   .delay(function(d, i) { return i * 80; })
   .duration(800)
   .attr("y", function(d) { return y(d.quantity); })
   .attr("height", function(d) { 
    return height - bottomPadding - y(d.quantity); }
   );

// Werte als SVG-Text in Säulen anzeigen und positionieren
barChart.append("text")
   .attr("x", function(d) { return x(d.channel); })
   .attr("y", function(d) { return y(d.quantity); })
   .attr("dx", x.rangeBand()/2)
   .attr("dy", "1.5em")
   .attr("text-anchor", "middle")
   .text(function(d) { return (d.quantity); });
...

Listing 12

Mit der Einbindung einer Stylesheet-Datei und ein wenig CSS lässt sich das SVG-Diagramm ansprechend stylen.

Fazit

Neben klassischen Diagrammarten wie Balken- oder Säulendiagrammen lassen sich mit D3 auch komplexere Arten wie Treemaps oder Akkorddiagramme realisieren. Sucht man ein Werkzeug, um schnell ein paar Charts auf einer Webseite einzubinden, wäre D3 aufgrund seiner Komplexität und seiner granulären Kontrollmöglichkeiten wohl nicht das passende Mittel der Wahl. Auch der Zeitaufwand für die Einarbeitung ist nicht zu unterschätzen. Wer sich jedoch einmal für D3 entschieden hat, dem steht ein mächtiges Werkzeug zur Visualisierung von Daten zur Verfügung.

Steffen Paasch
Steffen Paasch

ist Frontend Developer bei der Leipziger E-Commerce-Agentur Netresearch GmbH & Co.KG. Vorher studierte er Medientechnik und arbeitete mehrere Jahre als selbstständiger Webdesigner und -entwickler.

Startseite
  • Seite:
  • 1
  • 2
  • 3

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung