So fügen Sie Ihrer WordPress-Site mit D3.js Diagramme hinzu

Möglicherweise ist Ihnen der Begriff „Datenvisualisierung“ bekannt, da er sowohl als Praxis als auch als Karriereweg immer mehr zum Mainstream geworden ist. Es gibt einen Grund, warum dieser aufstrebende Bereich so weit ist – es ist wichtig, dass wir ständig mehr über unsere Benutzer lernen und ihnen die Daten zeigen, die unsere Behauptungen untermauern.

Wenn Daten sauber und professionell präsentiert werden, sind sie leicht zu verstehen und zu interpretieren. In den meisten Fällen sind Ihre Benutzer visuelle Menschen, also wie können Sie Daten besser veranschaulichen als mit Diagrammen? D3.js, auch als datengesteuerte Dokumente bezeichnet, ist eine großartige Möglichkeit, Diagramme zu Ihrer WordPress-Site hinzuzufügen.

Warum D3?

Diese Bibliothek hilft Designern, Daten im Web zu präsentieren. Die Möglichkeiten sind endlos, was dies zu einer sehr beliebten Bibliothek macht. Von einfach bis komplex bis hin zu allem dazwischen kann D3 angepasst werden, um so ziemlich jede Art von Diagramm zu rendern. Es spielt gut mit Standard-Webtechnologien, kann das DOM manipulieren, ist super flexibel und die Diagramme können genau nach Ihren Wünschen angepasst werden.

Inzwischen sind Sie höchstwahrscheinlich auf skalierbare Vektorgrafiken gestoßen, die oft als SVGs bezeichnet werden. Dies ist der Formattyp, den die D3-Bibliothek erstellt. SVGs sind großartig, weil sie klein, skalierbar und auflösungsunabhängig sind.

Nur um es klarzustellen, diese Lösung wird nicht mit vorgefertigten Diagrammen geliefert – Sie müssen sich Ihre eigenen einfallen lassen! Werfen Sie einen Blick in die D3-Galerie und sehen Sie viele großartige Beispiele, die Sie inspirieren werden.

Als Open-Source-Lösung müssen Sie sich keine Gedanken über Lizenzierung und Kosten machen. Da es sich um Open Source handelt, wird die Entwicklung fortgesetzt. Um mit der neuesten Version auf dem Laufenden zu bleiben, können Sie D3 auf Github forken.

Erstellen eines einfachen D3-Diagramms

Jetzt, da wir wissen, wie großartig D3 ist, lassen Sie uns etwas bauen. Wir erstellen ein einfaches Ringdiagramm, das die grundlegenden Konzepte von D3 abdeckt.

Schritt eins: Fügen Sie die Skripte zu Ihrer Website hinzu

Zuerst müssen Sie das D3-Skript zu Ihrer WordPress-Site hinzufügen. Auf der d3-Website steht es zum Download bereit, oder Sie können direkt auf die neueste Version verlinken. Sie werden feststellen, dass ich für dieses Tutorial eine minimierte Version verwende. D3 ist natürlich ziemlich klein, aber die Miniversion ist mit nur 148 KB immer noch etwas kleiner.

Als Nächstes erstellen Sie eine neue JavaScript-Datei, in die das benutzerdefinierte Diagrammskript eingefügt wird. Geben Sie der Datei einen erkennbaren Namen, damit sie leicht zu finden ist.

Es ist sehr wichtig, dass das D3-Skript vor dem Diagramm-spezifischen JavaScript aufgerufen wird. Wenn die Dinge nicht in der richtigen Reihenfolge aufgerufen werden, werden die Diagramme nicht gerendert. (Ich weiß das aus eigener Erfahrung, und wenn Sie es nicht sofort verstehen, werden Sie wahrscheinlich viel Zeit damit verbringen, Dinge zu reparieren, die nicht kaputt sind.)

Diese Skripte sollten Ihrer Website nach dem schließenden Body-Tag hinzugefügt werden. Stellen Sie beim Überprüfen der Seite sicher, dass sie in etwa so aussieht:

<script type="text/javascript" src="js/d3/d3.min.js"></script>
<script type="text/javascript" src="js/charts/charts.js"></script>

Denken Sie daran, dass Ihr Dateipfad je nach Dateistruktur davon abweichen kann.

Schritt zwei: Fügen Sie Skripte hinzu, um das Diagramm zu erstellen

Sie werden die Datei d3.js überhaupt nicht berühren, sondern nur in Ihrer spezifischen Diagrammdatei arbeiten. In diesem Fall heißt es charts.js .

Lassen Sie uns die Dinge Stück für Stück aufschlüsseln. Erstellen Sie zunächst Ihre Variable und legen Sie fest, was Sie in Ihrer Funktion benötigen. Ich nenne diese Variable donut .

var donut = (function(one) {
})();

Innerhalb der geschweiften Klammern fügen Sie Ihre Größeninformationen hinzu.

var width = 400,

height = 400,

radius = 200

Als nächstes definieren Sie Ihre Farben. Wie wäre es mit einem grau-blauen Diagramm? Die erste hier aufgeführte Farbe ist ein helles Grau, das die Standardfarbe sein wird. Die zweite ist die blaue Farbe, die die Daten darstellt.

colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);

Sie benötigen einige Daten, um dies zu testen, also fügen wir diese als Nächstes hinzu. Für dieses Tutorial sind die Daten fest codiert, aber Sie können auch Tabellenkalkulationsdaten und dynamische Daten mit D3 verwenden.

var piedata = [{

value: 50

}, {

value: 30

}, ]

Jetzt können Sie weitere Details hinzufügen, mit denen Sie definieren können, wie das Diagramm gerendert wird.

Der Bogen definiert den Innenradius. Stellen Sie sich den äußeren Radius des Diagramms vor – Sie möchten, dass er ziemlich dick ist, also sollte es ausreichen, 100 abzuziehen.

var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)

Dadurch wird der SVG-Container erstellt und der #donut ist das, worauf Sie auf Ihrer Seite abzielen, um das Diagramm tatsächlich zu rendern. Hier sehen Sie Ihre Farben aus dem obigen Schritt.

var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

Fertiger Code

Nur für den Fall, dass Sie das, was Sie haben, mit dem Beispiel vergleichen möchten, finden Sie hier das vollständige Code-Snippet.

/* start donut charts */
var donut = (function(one) {
var width = 400,

height = 400,

radius = 200
colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);
var piedata = [{

label: "One",

value: 50

}, {

label: "Two",

value: 30

}, ]
var pie = d3.layout.pie()

.value(function(d) {

return d.value;

})
var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)
var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

})();

Das Diagramm sehen

Sie müssen eine neue Seite oder einen neuen Beitrag erstellen, damit Sie das Donut-Diagramm „aufrufen“ können, um es tatsächlich zu sehen. Stellen Sie sicher, dass Sie sich im Textbearbeitungsmodus befinden.

 <div>

      <svg id="donut" viewBox="0 0 400 400" perserveAspectRatio="xMinYMid"></svg>

</div>

Viewbox und Seitenverhältnis zur Größentabelle

Im SVG-Tag gibt es etwas Besonderes, nämlich die viewBox und preserveAspectRatio . Dies wurde nicht von D3 generiert und ist völlig optional. Möglicherweise haben Sie eine andere bevorzugte Methode zur Größenanpassung, aber diese funktioniert in der Regel gut und hilft bei der Reaktionsfähigkeit der Diagramme.

Da wir insbesondere in diesem Fall eine perfekt runde Form beibehalten möchten, stellt das Festlegen eines Seitenverhältnisses sicher, dass die SVG-Skalierung passt. Hier kommt die viewBox ins Spiel. Der Vorteil der viewBox besteht darin, dass sie definiert, wie alle im SVG verwendeten Maße und Koordinaten skaliert werden sollen, damit sie in den verfügbaren Platz passen. Wenn Sie auch 400 als Maß verwenden, finden Sie hier eine kurze Erklärung, wie Sie die Kreisform beibehalten können.

Wir haben zwei Werte von 400, die gleich sind; Der Grund dafür ist, dass das Bild richtig skaliert. Mit unserer viewBox="0 0 400 400" erstellen wir ein Koordinatensystem für die Grafik. Es ist 400 Einheiten breit und 400 Einheiten hoch. Die Breite und Höhe der SVG-Grafik legt den sichtbaren Bereich fest, und durch das Festlegen einer viewBox können Sie angeben, dass Ihre Grafiken gedehnt werden können, um in einen bestimmten Container zu passen (höchstwahrscheinlich standardmäßig der Viewport, der der Teil der Webseite ist, den der Benutzer anzeigen kann aktuell siehe).

Es gehört noch ein bisschen mehr dazu, denn selbst wenn die viewBox definiert ist, wird sie immer noch nicht perfekt skaliert. Es wird nicht verzerrt, was gut ist, aber es geht um mehr. Treffen Sie den Flügelmann, preserveAspectRatio . Es hat keine Wirkung, es sei denn, es gibt eine viewBox , die das Seitenverhältnis des Bildes definiert. Der Maßstab wird angepasst, um das Seitenverhältnis beizubehalten, sodass Sie Ihr perfekt kreisförmiges Diagramm beibehalten können. Beim Einbeziehen von „ preserveAspectRatio “ planen Sie Fälle ein, in denen die viewBox nicht mit dem Seitenverhältnis des Darstellungsbereichs oder Containers übereinstimmt, in dem sich das Diagramm befindet. In den meisten Fällen wird das Bild standardmäßig skaliert, bis es sowohl der Höhe als auch der Breite entspricht, aber zentriert sich in jedem zusätzlichen Raum. Wir haben preserveAspectRatio="xMidYMid" , das den Browser anweist, die Grafik innerhalb des Ansichtsfensters in beide Richtungen zu zentrieren.

Das Wichtigste zum Mitnehmen ist das Wissen, dass die Grafik nicht abgeschnitten wird und dass sie skalierbar ist. Der Schlüssel, um dies wirklich zu verstehen, besteht darin, mit den Werten zu experimentieren. Eine gute Möglichkeit, dies zu tun, besteht darin, zu sehen, was passiert, wenn die Werte geändert werden, und wie sich dies auf das Ansichtsfenster bezieht.

Browserunterstützung und d3

Es besteht die Möglichkeit, dass Sie einen modernen Browser verwenden, aber es ist erwähnenswert, wenn Sie ältere Browser unterstützen müssen. Insgesamt ist die Browserunterstützung großartig, und Sie werden wahrscheinlich keine Probleme haben, aber D3.js funktioniert nicht gut mit älteren Browsern wie IE8.

Das Erstellen eines einfachen Diagramms ist eine großartige Möglichkeit, mit D3.js einsatzbereit zu sein. Die Kenntnis der Grundlagen und das Kennenlernen von D3-Starterdiagrammen sind sehr hilfreich, wenn Sie Ihre Daten entwerfen und zu weiteren Diagrammtypen übergehen. Von einfach bis komplex, die Gestaltungsmöglichkeiten sind unendlich.

Wie ist dein Diagramm geworden? Lass es uns in den Kommentaren wissen!

Was kommt als nächstes?

Laden Sie dieses E-Book herunter, um eine Liste unserer am meisten empfohlenen Plugins für Entwickler zu erhalten! Wir haben festgestellt, dass all diese Plugins einfach zu bedienen, nicht zu leistungsintensiv auf Ihrer Website und einfach absolut zuverlässig sind.

Sind Sie bereit, Ihr neues Lieblings-Plugin zu installieren? Klicken Sie unten!