Menü

D3.js API-Funktionen - Tutorial mit Beispielen

  • Haupt
  • Andere
  • D3.js API-Funktionen - Tutorial mit Beispielen

d3 js api functions tutorial with examples

Versuchen Sie Unser Instrument, Um Probleme Zu Beseitigen

In diesem Tutorial werden verschiedene D3.js-API-Funktionen zum Hinzufügen von Funktionen wie Datenbindung, Join, Laden und Analysieren von Daten, Interpolation usw.:

D3.js ist eine Open-Source-JavaScript-Datenvisualisierungsbibliothek, die verschiedene API-Funktionen umfasst, die aufregende Funktionen wie Datenbindung, Verknüpfung, Laden und Analysieren externer Daten im CSV-, XML- und JSON-Format, Manipulieren von Zufallszahlen, Interpolation und Text hinzufügen Formatierung und Internationalisierung sowie verschiedene Funktionen wie Animation, Übergang und Diagrammbildung zur Visualisierung von Daten.

beste Programme, um gelöschte Dateien wiederherzustellen

Sie können sich hierzu auf unsere früheren Tutorials beziehen d3 serie um mehr über seine Funktionen, Vorteile und Voraussetzungen zu erfahren.

API-Funktionen in D3.js.

Was du lernen wirst:

Datenbindung mit D3.js.

Um Datenvisualisierungen wie Diagramme und Grafiken zu erstellen, müssen Daten mit einem DOM-Element verknüpft oder verknüpft werden.

Daten können ein Array sein, bei dem es sich um einen Container handelt, der numerische Werte desselben Typs enthält, wie unten dargestellt.

var data = (59.5, 17.2, 9.6, 7.6, 5.5, 0.5)

Der erste Schritt besteht darin, ein SVG-Objekt zu erstellen. Um eine Ebene oder ein Framework zum Erstellen der Datenvisualisierung externer Daten zu erhalten, wird das HTML-Element mit d3.select () ausgewählt und SVG angehängt, das durch Hinzufügen von Attributen als Zeichenfläche fungiert wie Breite und Höhe für die Leinwand.

var svg = d3.select(HTML element like body or div) .attr(width, value from variable for width) .attr(height, value from variable for height)

Der nächste Schritt ist das Einfügen des SVG-Elements 'g', das sich wie eine Gruppe verhält, die andere SVG-Elemente enthält.

svg.selectAll ('g')

Binden oder verknüpfen Sie Daten mithilfe der Funktion .data (data) mit dieser SVG-Form, die mit der Zeichenfläche verknüpft ist.

svg.selectAll ('g').data(data)

Der nächste Schritt besteht darin, Daten mit der Methode .enter () an die Funktion .data (data) an die DOM-Elemente zu binden.

svg.selectAll ('g').data(data).enter()

Fügen Sie außerdem die SVG-Form hinzu, damit wir die Form an die Leinwand anhängen können.

svg.selectAll ('g') . data(data).enter().append('g')

Ein Beispiel für die Datenbindung ist unten angegeben.

var infoset = (59.5, 17.2, 9.6, 7.6, 5.5, 0.5) var span = 500, ceil = 500; var scalespan = d3.scaleLinear() .domain((0, d3.max(infoset))) .range((0, 400)); var screen = d3.select('body').append('svg') .attr('width', span) .attr('height', ceil) .append('g').attr('transform', 'translate(5,20)'); var rule = screen.selectAll('rect') .data(infoset).enter() .append('rect') .attr('width', function(d){ return scalespan(d);}) .attr('height', 20) .attr('y', function(d, i){ return i*25; }) .attr('fill', '#b3ccff'); screen.selectAll('text') .data(infoset).enter().append('text') .attr('y', function(d, i){ return i*25; }) .attr('x', function(d){ return scalespan(d);}) .text(function(d) {return d;}) .attr('fill', 'blue').attr('dy','.85em'); Daten in D3.js verbinden, laden und analysieren
Die Ausgabe wird in grafischer Form von Koordinaten mit Datenbindung erfasst

Um Daten zu binden, was in unserem Fall eine kontinentale Bevölkerungsdichte ist

var infoset = (59,5, 17,2, 9,6, 7,6, 5,5, 0,5)

Der variable Bildschirm wird einem Zeichenbereich zugewiesen, indem dem HTML-Element, in unserem Fall dem Hauptteil, eine SVG-Form hinzugefügt wird.

Die variable Skalierungsspanne verwendet die Funktion scaleLinear () mit Domänen- und Bereichsparametern, um ein Diagramm zu zeichnen und Werte auf der Skala in einem grafischen Format anzuzeigen.

.data (infoset) .enter () hilft beim Binden unseres Datensatzes, der einer Variablen Infoset zugewiesen ist.

Text wird angehängt, um die Werte gegen die Rechtecke unterschiedlicher Länge zu zeichnen, die ihren Werten im Datensatz entsprechen.

Daten in D3.js verbinden, laden und analysieren

D3.js kann externe Daten oder lokal in Variablen aus verschiedenen Dateitypen laden und diese Daten an DOM-Elemente binden.

Verschiedene Datenformate sind CSV, JSON, TSV und XML, während d3.csv (), d3.JSON (), d3.tsv () und d3.xml () die jeweiligen Methoden zum Laden von Datendateien in verschiedenen sind Formate aus externen Quellen durch Senden einer http-Anforderung an die angegebene URL zum Laden von Dateien oder Daten der jeweiligen Formate sowie Ausführen der Rückruffunktion mit analysierten jeweiligen Datenobjekten.

Standardgebietsschema
Externe Daten in verschiedenen Formaten können wie oben gezeigt angezeigt werden

Die Syntax zum Laden der CSV-Datendatei lautet wie folgt.

d3.csv (url (, row, callback));

# 1) Die erste Parameter-URL oben ist die URL oder der Serverpfad der CSV-Datei, bei der es sich um eine externe Datei handelt, die von der Funktion d3.csv geladen werden soll. in unserem Fall ist es

http: // localhost: 8080 / examples / movie_published.csv

#zwei) Der zweite Parameter ist optional

#3) Der dritte Parameter ist Callback. Hierbei handelt es sich um eine Funktion, die von einer anderen Funktion als Argument übergeben werden kann. Dadurch wird sichergestellt, dass bestimmter Code ausgeführt wird, bis die Ausführung eines anderen Codes für die JSON-, TSV- und XML-Formate der Datei, Funktion d3.csv, bereits abgeschlossen ist ersetzt durch d3.json, d3.tsv bzw. d3.xml.

Ein Beispiel zum Parsen externer Daten finden Sie unten.

d3.csv('movie_published.csv', function(data) { console.log(data); });
d3.csv () lädt die CSV-Datei wie oben gezeigt.

Wenn Sie im Google Chrome-Browser geöffnet sind, klicken Sie auf F12. Bei der Seitenaktualisierung wird das Konsolenprotokoll aus dem Code angezeigt, in unserem Fall console.log (Daten), in dem Werte aus dem Datensatz mit Spaltenüberschriften, Filmname und Jahr angezeigt werden aus der CSV-Datei angezeigt werden, die sich am Serverstandort befindet.

Zufallszahlen in D3.js bearbeiten

d3 - Zufällige API-Methoden geben Zufallszahlen aus verschiedenen Wahrscheinlichkeitsverteilungen zurück. Dies ist eine mathematische Funktion, die die Wahrscheinlichkeit des Auftretens unterschiedlicher Ergebnisse berechnet.

Diese Funktionen verwenden hauptsächlich die Mathematik. Die Zufallsfunktion von JavaScript, die Zahlen erzeugt, die zwischen der minimalen und einer maximalen Zahl des angegebenen Bereichs liegen, führt bei jeder Berechnung zu einer eindeutigen Zahl. Zufallsfunktion wird ausgeführt.

  • d3.randomUniform - Generieren Sie Zufallszahlen aus einer gleichmäßigen Verteilung. Z.B. d3.randomUniform (1, 2) () - gibt Zufallszahlen einschließlich 1 und weniger als 2 zurück.
  • d3.randomNormal - Generieren Sie Zufallszahlen aus einer Normalverteilung, Z.B. d3.randomNormal (1, 2) () - gibt eine Ganzzahl zurück, die zwischen einem angegebenen Minimalwert und Maximalwerten liegt.
  • d3.randomLogNormal - Generieren Sie Zufallszahlen aus einer logarithmischen Normalverteilung, und der erwartete Wert ist der natürliche Logarithmuswert für die Zufallsvariable.
  • d3.randomBates - Generieren Sie Zufallszahlen aus einer Bates-Verteilung mit unabhängigen Variablen.
  • d3.randomIrwinHall - Generieren Sie Zufallszahlen aus einer Irwin-Hall-Verteilung.
  • d3.randomExponential - Generieren Sie Zufallszahlen aus einer Exponentialverteilung.

Beispiel für Zufallsfunktionen in d3

Random Functions in d3

Random Functions in d3

document.write(d3.randomUniform(1, 2)() +'

'); document.write(d3.randomNormal(1, 2)()+'

'); document.write(d3.randomLogNormal(1, 2)()+'

'); document.write(d3.randomBates(1, 2)()+'

'); document.write(d3.randomIrwinHall(1, 2)()+'

'); document.write(d3.randomExponential(1, 2)()+'

');

Die Ausgabe von d3-Zufallsmethoden wird angezeigt

Interpolation In D3.js.

API-Methoden, die zum Interpolieren zwischen zwei Zufallswerten angewendet werden, hängen vom Typ des Endwerts ab. B, Allgemeine Syntax ist d3.interpolieren (a, b). Im Folgenden finden Sie eine Tabelle mit Datentypen des Endwerts b und der entsprechenden Methode oder Funktion, die sich je nach Datentyp ändert.

Art des Endwerts bVerwendeter Methodenname
Wenn b ein generisches Array istinterpolateArray ()
Wenn b boolesch ist, null oder undefiniertKonstante b wird verwendet
Wenn b eine Zahl istinterpolateNumber ()
Wenn b eine Farbe oder Zeichenfolge ist, die sich auf Farbe beziehtinterpolateRgb ()
Wenn b ein Datum istinterpolateDate ()
Wenn b eine Zeichenfolge istinterpolateString ()
Wenn b ein typisiertes Array von Zahlen istinterpolateNumberArray ()
Wenn sich b auf die Zahl beziehtinterpolateNumber ()
AndernfallsinterpolateObject ()

Das folgende Beispiel erklärt:

  • d3.interpolateNumber () -Funktion mit 10 als Startwert und Endwert als 20, angezeigte Werte reichen von Startwert 10 bis Endwert 20 für Interpolationsparameter von (0.0) bis (0.5) bis (1.0)
  • d3.interpolateRgb () -Funktion für zwei verschiedene Farbnamen, die zu entsprechenden rgb-Werten ('r', 'g', 'b') führen, um Parameter von (0.0) bis (0.5) bis (1.0) zu interpolieren.
  • Die Funktion d3.interpolateDate () für zwei verschiedene Daten im Format „JJJJ-MM-TT HH: MM: SS“ zeigt Daten zwischen dem oben genannten Datumsbereich für Interpolationsparameter von (0.0) bis (1.0) an.

Ein Beispiel für die Interpolation für Zahlen, Farben und Daten zwischen dem Bereich ist unten angegeben.

Interpolate Numbers, Colors and Dates

var inpolat = d3.interpolateNumber(99,100); document.write(inpolat(0.0) + '

'); document.write(inpolat(0.2)+ '

'); document.write(inpolat(0.5) + '

'); document.write(inpolat(1.0)+ '

'); var inpolcolrs = d3.interpolateRgb('yellow', 'aquamarine'); document.write(inpolcolrs(0.0)+ '

'); document.write(inpolcolrs(0.2)+ '

'); document.write(inpolcolrs(0.5)+ '

'); document.write(inpolcolrs(0.8)+ '

'); document.write(inpolcolrs(1.0)+ '

'); var inpoldates = d3.interpolateDate(new Date('2020-01-01 00:00:00'), new Date('2020-01-15 23:59:59')); document.write(inpoldates(0.0)+ '

'); document.write(inpoldates(0.2)+ '

'); document.write(inpoldates(0.5)+ '

'); document.write(inpoldates(0.8)+ '

'); document.write(inpoldates(1.0)+ '

');

Interpolation in D3.js für Zahlen und Farben

Textformatierung und Internationalisierung mit D3.js.

Textformatierung und Lokalisierung können in D3.js mit den Funktionen Zahlenformat, Datumsformat und Gebietsschema erreicht werden, wie nachstehend anhand von Beispielen erläutert.

D3 - lokal ()

d3.locale (Definition) gibt das für die Definition spezifische Gebietsschema zurück. Standardmäßig lautet die Gebietsschemadefinition US-Englisch für d3.locale (Definition).

Welches Unternehmen ist derzeit führend bei Cloud-basierten Webhosting-Diensten?

Die Eigenschaften für die Formatierung von Zahlen für die Gebietsschemadefinition sind unten aufgeführt.

  • Dezimal: Der Dezimalpunkt wird normalerweise in Währungen wie 25,75 ( Z.B. '.').
  • Tausende: Tausend ist ein Bezeichner oder ein Trennzeichen, das nach tausend Werten wie 2.475 als Komma verwendet wird ( Z.B. ',').
  • Gruppierung: Die Array-Gruppe für jede Gruppe und die Größe kann mithilfe von Arrayname (5) überprüft werden, wobei 5 ein Index und die Array-Größe 6 Mitglieder beträgt.
  • Währung: Präfix und Suffix für die Währungszeichenfolgen ( Z.B. ('$', '')).
  • Terminzeit: Das Format für Datum und Uhrzeit (% c) enthält Datum und Uhrzeit ( Z.B. '% A% b% e% X% Y').
  • Datum: Das Datum (% x) ( Z.B. Formatzeichenfolge '% m /% d /% Y') in Monat, Tag und Jahr.
  • Zeit: Die Zeit (% X) ( Z.B. Formatzeichenfolge '% H:% M:% S') in Stunden, Minuten und Sekunden.
  • Zeiträume: Der A.M. und P.M. Äquivalente ( Z.B. ('AM', 'PM')).
  • Tage: Wochentage, beginnend mit Sonntag, in Alphabeten.
  • shortDays: Kurze Tage oder abgekürzte Namen wie SONNE, MON usw. der Wochentage, beginnend mit Sonntag.
  • Monate: Die vollständigen Namen des Monats lauten Oktober (beginnend mit Januar).
  • kurzeMonate: Kurze Monate oder abgekürzte Namen wie JAN, FEB, MAR usw. der Monate (ab Januar).

Alle oben erläuterten Parameter werden im folgenden Bild als Variablen mit ihren jeweiligen Werten angezeigt.

Das Standardgebietsschema ist en_US, das russische Gebietsschema (ru_RU) hat Datums-, Zeit- und Intervallkonstanten.

D3.format

d3.format aus der JavaScript-Bibliothek verwendet eine Zahl als Eingabeargument, die Syntax lautet d3.format (Bezeichner). Um Zahlen zu transformieren, wird d3.format verwendet.

Ein Beispiel für die Anwendung eines auf d3 basierenden Formats ist unten angegeben.

Formatting for currency body {padding: 50px; font: 16px Courier;} p { color:blue; font-size: 16px; font-weight: bold;} var body = d3.select('body'); var comafmt = d3.format(','), decimalfmt = d3.format('.1f'), comadecimalfmt = d3.format(',.2f'), suffixfmt = d3.format('s'), suffixfmtDecimal1 = d3.format('.1s'), suffixfmtDecimal2 = d3.format('.2s'), rupiemoneyfmt = function(d) { return 'Rs ' + comadecimalfmt(d); }, intmoneyfmt = function(d) { return '$ ' + comadecimalfmt(d); }, euromoneyfmt= function(d) { return '€ ' + comadecimalfmt(d); }, percentfmt = d3.format(',.2%'); var number = 27500; body.append('p').text('Number used for formatting is : ' + number).style('font-weight', 'bold'); body.append('p').text(function() { return 'Indian Rupee format of above Number : ' + rupiemoneyfmt(number); }); body.append('p').text(function() { return 'International Currency format will be : ' + intmoneyfmt(number); }); body.append('p').text(function() { return 'Euro Currency format will be : ' + euromoneyfmt(number); }); body.append('p').text(function() { return 'Percent format : ' + percentfmt(number); }); body.append('p').text(function() { return 'Suffix for large number : ' + suffixfmt(number); }); body.append('p').text(function() { return 'Round off ceil number: ' + suffixfmtDecimal1(number); }); body.append('p').text(function() { return 'Round off floor number : ' + suffixfmtDecimal2(number); }); body.append('p').text(function() { return 'Comma for large number: ' + comafmt(number); }); body.append('p').text(function() { return 'One decimal format : ' + decimalfmt(number); }); body.append('p').text(function() { return 'Two decimal format : ' + comadecimalfmt(number); });
Formatierung für Nummer und Währung mit d3.format

Ändern mit Datumsformaten mit D3.js.

Zeitformatierung unter Verwendung der D3.js-Bibliothek, wobei d3.timeParse mit Platzhalterzeichen angewendet werden kann, d. H. Mit regulären Ausdrücken, die dabei helfen, das Eingabezeitformat in das gewünschte Format zu konvertieren.

Ein Beispiel für das Format in Bezug auf Uhrzeit und Datum ist unten angegeben.

body {font-family: Arial, Helvetica, sans-serif; color: blue;} var datetimefmt = d3.timeFormat('%d-%m-%Y %H:%M:%S %p'); document.write(datetimefmt(new Date()) +'

'); var timePortion = d3.timeFormat('%H:%M:%S %p'); document.write(timePortion(new Date()) +'

'); var datePortion = d3.timeFormat('%B %d, %Y'); document.write(datePortion(new Date())+'

'); var datefmt = d3.timeFormat(' %d'); document.write(datefmt(new Date())+'

'); var dayfmt = d3.timeFormat('%A '); document.write(dayfmt(new Date())+'

'); var monfmt = d3.timeFormat('%B'); document.write(monfmt(new Date()) +'

');

Erläuterung des Datums- und Uhrzeitformats

Fazit

In diesem Tutorial haben wir alle verbleibenden wesentlichen Methoden von D3.js wie die Datenbindung behandelt, bei der Daten in Form eines Arrays und Join-, Lade- und Analysedaten im CSV-, JSON- und XML-Format vorliegen.

Wir haben auch die Manipulation mit Zufallszahlen und die Interpolationsmethode besprochen, um Datengruppen in Diagrammen oder Grafiken zu visualisieren und Text und Lokalisierung mit d3.locale-Methoden für Zahlen, Datum, Uhrzeit und verschiedene Länderwährungen zu formatieren.

Literatur-Empfehlungen

^