Lerne D3.js in 5 Minuten

Eine Einführung in die Erstellung visueller Darstellungen Ihrer Daten

D3.js ist eine JavaScript-Bibliothek, mit der Dokumente basierend auf Daten bearbeitet werden. Es verwendet HTML, CSS und SVG, um visuelle Darstellungen von Daten zu erstellen, die in jedem modernen Browser angezeigt werden können.

Es bietet auch einige fantastische Funktionen für Interaktionen und Animationen.

In diesem Tutorial werden wir die grundlegenden Konzepte und Funktionen von D3.js untersuchen. Wir werden anhand einiger Beispiele wie dem Rendern eines Balkendiagramms, dem Rendern von HTML- und SVG-Elementen und dem Anwenden von Transformationen und Ereignissen darauf lernen, wie man es verwendet.

Wir haben auch einen kostenlosen 10-teiligen Kurs über D3.js auf Scrimba erstellt. Schau es dir hier an.

Erste Schritte mit D3

Da D3.js eine JavaScript-Bibliothek ist, können Sie sie einfach in Ihre HTML-Datei in einem Skript-Tag einfügen.

Die vollständige Quelle und die Tests können auch auf GitHub heruntergeladen werden.

DOM-Auswahl

Mit D3.js können wir das Document Object Model (DOM) bearbeiten, dh wir können Elemente auswählen und verschiedene Transformationen auf sie anwenden.

Beginnen wir mit einem einfachen Beispiel, in dem wir mit D3 die Farbe und die Schriftgröße eines Überschriften-Tags auswählen und ändern.

 Learn D3 in 5 minutes

Today is a beautiful day!!

d3.select('h3').style('color', 'darkblue'); d3.select('h3').style('font-size', '24px');

Wir verketten also einfach die select()Methode für das d3Objekt und setzen sie dann fort style(). Der erste Parameter bestimmt, was wir ändern möchten, und der zweite gibt den Wert an. Hier ist das Ergebnis:

Datenbindung

Das nächste Konzept, das Sie lernen müssen, ist die Datenbindung, da dies eine der coolsten Funktionen von D3 ist. Mit ihm können wir DOM-Elemente in Echtzeit füllen oder bearbeiten.

In unserem HTML haben wir eine einfache ungeordnete Liste <ul>:

    Wir wollen die Listenelemente mit einem Datenobjekt erstellen. Hier ist der Code, um genau das zu tun:

     var fruits = ['apple', 'mango', 'banana', 'orange']; d3.select('ul') .selectAll('li') .data(fruits) .enter() .append('li') .text(function(d) { return d; });

    In unserem obigen JavaScript-Code wählt D3 zuerst die <ul> an d any aus

  • Elemente insi de it using s elect() andselectAll () -Methoden. Es mag etwas seltsam erscheinen, dass wir lealle li-Elemente auswählen, bevor wir sie erstellt haben, aber genau so funktioniert D3.

    Wir übergeben dann die Daten mit der data()Methode und fügen hinzu enter(), was wie eine Schleife funktioniert. Alles nach diesem Punkt wird einmal pro Element im fruitsArray ausgeführt.

    Mit anderen Worten, es wird dann <für jedes Element in Daten ein Li> angehängt . Für every

  • Original text


  • Tag, es hängt auch Text innerhalb t usinder text () -Methode an. Der eParameter d inside der Rückruffunktion text () bezieht sich auf das Element im Array bei der angegebenen Iteration (apple, mang o usw.).

    Hier ist unser Endergebnis:

    SVG-Elemente erstellen

    Scalable Vector Graphics (SVG) ist eine Möglichkeit, grafische Elemente und Bilder im DOM zu rendern. Da SVG vektorbasiert ist, ist es sowohl leicht als auch skalierbar. D3 verwendet SVG, um alle visuellen Elemente zu erstellen, und ist daher ein zentraler Baustein der Bibliothek.

    Im folgenden Beispiel wird ein Rechteck mit D3 in einem SVG-Container gezeichnet.

    //Select SVG elementvar svg = d3.select('svg');
    //Create rectangle element inside SVGsvg.append('rect') .attr('x', 50) .attr('y', 50) .attr('width', 200) .attr('height', 100) .attr('fill', 'green');

    In diesem Code rendert D3 ein Rechteckelement innerhalb des DOM. Es wählt zuerst das SVG-Element aus und rendert dann ein Rechteckelement darin. Mit dieser attr()Methode werden auch die x- und y-Koordinaten des Rechtecks ​​zusammen mit seinen Eigenschaften für Breite, Höhe und Füllung festgelegt .

    Erstellen eines Balkendiagramms

    Mit D3 können wir auch viele verschiedene Arten von Diagrammen und Grafiken erstellen, um Daten auf effiziente Weise darzustellen. Im folgenden Beispiel erstellen wir mit D3 ein einfaches Balkendiagramm.

    Beginnen wir mit der Erstellung eines SVG-Tags direkt in unserem HTML.

    Dann schreiben wir das JavaScript, das wir benötigen, um das Balkendiagramm in unserem zu rendern vg> tag:

    var data = [80, 120, 60, 150, 200];
    var barHeight = 20;
    var bar = d3.select('svg') .selectAll('rect') .data(data) .enter() .append('rect') .attr('width', function(d) { return d; }) .attr('height', barHeight - 1) .attr('transform', function(d, i) { return "translate(0," + i * barHeight + ")"; });

    In this code, we have an array of numbers which we will use to render our bar chart. Each item in an array would represent a single bar. We make use of the fact that bars are just rectangles with variable width or height.

    After selecting the SVG and rectangle elements, we pass our dataset using the data() method and call enter() to start looping on data.

    For each data item, we render a rectangle and set its width equivalent to its value. We then set the height of each bar, and to avoid overlapping, we provide some padding to it by subtracting 1 from barHeight.

    We then transform our bars using the translate property which will position every rectangle one after another rather than starting from the same point. transform() takes a callback function which gets data and index in its parameters. We translate the rectangle on the y-axis, by multiplying index with the height of the bar.

    Here’s the result:

    Event Handling

    Finally, let’s also look at event handling. D3 also supports built-in and custom events which we can bind to any DOM element with its listener. In the example below, we are binding the click event to the button and appending a heading tag to a body in its event handler.

    d3.select('#btn') .on('click', function () { d3.select('body') .append('h3') .text('Today is a beautiful day!!'); });

    So when we click the button, the text below appears:

    Conclusion

    D3.js is a very powerful, yet simple, JavaScript library that allows you to play with and bring life to documents based on data using HTML, CSS, and SVG.

    There are a lot of good resources available online to learn D3.js. There is a free course on D3.js which we have created on Scrimba and is available for free here.

    Thank you :)

    I am Sohaib Nehal. I am a Full-Stack Web Application Developer. You can reach me at [email protected] or on Twitter @Sohaib_Nehal. Thank you :-)