Para el tutorial de hoy vamos a empezar a diseñar y crear gráficos de Riegel usando D3.js, sigue leyendo para que sepas cómo hacerlo
Was ist D3.js?
D3.js es una biblioteca de JavaScript basada en datos para manipular elementos DOM.
“D3 te ayuda a dar vida a los datos mediante HTML, SVG y CSS. El énfasis de D3 en los estándares Netz le brinda todas las capacidades de los Browser modernos sin atarse a un marco propietario, combinando poderosos componentes de visualización y un enfoque basado en datos para la manipulación de DOM «. – 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 significa gráficos vectoriales escalables, que técnicamente es un lenguaje de marcado basado en XML.
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.
En este diagrama, voy a mostrar los 10 lenguajes de Programmierung más populares según el resultado de la Encuesta de Desarrolladores 2018 de Stack Overflow .
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.
<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 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.
También defino un valor de margen que le da un poco de relleno adicional al gráfico. El relleno se puede aplicar con un elemento <g> traducido por el valor deseado. De ahora en adelante, recurro a este grupo para mantener una buena distancia de cualquier otro Inhalt der Seite.
const chart = svg.append ('g') .attr ('transform', `translate ($ {margin}, $ {margin})`);
Agregar atributos a un elemento es tan fácil como llamar al método attr. El primer parámetro del método toma un Attribut que quiero aplicar al elemento DOM seleccionado. El segundo parámetro es el valor o una función de devolución de llamada que devuelve su valor. El código anterior simplemente mueve el inicio del gráfico a la posición (60; 60) del 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]);
La escala lineal es el tipo de escala más conocido. Convierte un Domain de entrada continuo en un rango de salida continuo. Observa el método rangey domain. El primero toma la longitud que debe dividirse entre los límites de los valores del dominio.
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!
