D3.js API-funktioner - Vejledning med eksempler

d3 js api functions tutorial with examples

Denne vejledning forklarer forskellige D3.js API-funktioner for at tilføje funktioner såsom databinding, sammenføjning, indlæsning og parsering af data, interpolering osv .:

D3.js er et open source JavaScript-datavisualiseringsbibliotek, der består af forskellige API-funktioner, der tilføjer spændende funktioner såsom databinding, sammenføjning, indlæsning og parsering af eksterne data i CSV-, XML- og JSON-format, manipulering af tilfældige tal, interpolering og tekst formatering og internationalisering sammen med forskellige funktioner såsom animation, overgang og grafdannelse til visualisering af data.

open source cross browser testværktøjer

Du kan henvise til vores tidligere tutorials om dette d3-serien at vide mere om dens funktioner, fordele og forudsætninger.

Hvad du lærer:

• Dataindbinding med D3.js
  • Deltagelse, indlæsning og analyse af data i D3.js
  • Manipulering af tilfældige tal i D3.js
  • Interpolering i D3.js
  • Tekstformatering og internationalisering med D3.js
    • D3 - lokal ()
    • D3.format
  • Ændring med datoformater med D3.js
• Konklusion
  • Anbefalet læsning

Dataindbinding med D3.js

For at oprette datavisualisering som diagrammer og grafer er det nødvendigt at binde eller sammenføje data med et DOM-element.

Data kan være en matrix, der er en beholder, der indeholder numeriske værdier af de samme typer, som vist nedenfor.

Det første trin vil være at oprette et SVG-objekt for at have et plan eller en ramme til at oprette datavisualisering af eksterne data, HTML-elementet vælges med d3.select () og tilføj SVG, der fungerer som et lærred ved at tilføje attributter såsom bredde og højde til lærredet.

Det næste trin er indsættelsen af ​​SVG-element 'g', der fungerer som en gruppe, der indeholder andre SVG-elementer.

Yderligere binder eller sammenføjer data til denne SVG-form, der er knyttet med lærred, ved hjælp af .data (data) -funktionen.

Næste trin er at binde data til DOM-elementerne ved hjælp af .enter () -metoden til .data (data) -funktionen.

Tilføj SVG-form, så vi kan vedhæfte formen på lærredet.

Et eksempel på databinding er givet nedenfor.

For at binde data, som i vores tilfælde er en kontinent klog befolkningstæthed

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

Den variable skærm tildeles et tegneområde ved at vedhæfte SVG-form til html-elementet, som er kroppen i vores tilfælde.

Den variable skaleringsspænding tager skalaLinear () -funktion med domæne- og rækkevidde-parametre for at plotte en graf for at vise værdier på skalaen i et grafisk format.

.data (infoset) .enter () hjælper med at binde vores datasæt tildelt en variabel Infoset.

Tekst tilføjes for at tegne værdierne mod rektanglerne i forskellige længder svarende til deres værdier i datasættet.

Deltagelse, indlæsning og analyse af data i D3.js

D3.js kan indlæse eksterne data eller lokalt i variabler fra forskellige filtyper og binde disse data til DOM-elementer.

Forskellige dataformater er CSV, JSON, TSV og XML, hvorimod d3.csv (), d3.JSON (), d3.tsv () og d3.xml () er de respektive metoder til at indlæse datafiler i forskellige formater fra eksterne kilder ved at sende en http-anmodning til den angivne url for at indlæse filer eller data i de respektive formater samt udføre tilbagekaldsfunktionen med parsede respektive dataobjekter.

Syntaksen for at indlæse CSV-datafilen er som angivet nedenfor.

# 1) Den første parameter url ovenfor er URL'en eller serverstien til csv-filen, som er en ekstern fil, der skal indlæses af d3.csv-funktionen. i vores tilfælde er det

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

#to) Den anden parameter er valgfri

# 3) Den tredje parameter er tilbagekaldelse, som er en funktion, der kan sendes som et argument af en anden funktion, hvilket sørger for, at specifik kode bliver udført, indtil en anden kode allerede er færdig med at udføre for JSON-, TSV- og XML-formater af filen, funktion d3.csv er erstattet med henholdsvis d3.json, d3.tsv og d3.xml.

Nedenfor gives et eksempel på at analysere eksterne data.

Hvis det åbnes i Google Chrome-browseren, skal du klikke på F12 og sideopdateringen viser konsolloggen fra den kode, der i vores tilfælde er console.log (data), som viser værdier fra datasættet med kolonnehoveder, filmnavn og år vil vises fra CSV-filen, der opbevares på serverplaceringen.

Manipulering af tilfældige tal i D3.js

d3 - tilfældige API-metoder returnerer tilfældige tal fra forskellige sandsynlighedsfordelinger, som er en matematisk funktion, der beregner chancerne for forekomster af forskellige mulige resultater.

Disse funktioner bruger primært matematikken. tilfældig funktion af JavaScript, der producerer tal, der falder mellem det mindste og det maksimale antal af det angivne interval, resulterer det i et unikt nummer hver gang matematikken. tilfældig funktion bliver udført.

• d3.randomUniform - Generer tilfældige tal ud fra en ensartet fordeling. For eksempel. d3.randomUniform (1, 2) () - returnerer tilfældige tal inklusive 1 og mindre end 2.
• d3.randomNormal - Generer tilfældige tal ud fra en normalfordeling, For eksempel. d3.randomNormal (1, 2) () - returnerer et heltal, der er mellem en specificeret minimumsværdi og maksimumværdi.
• d3.randomLogNormal - Generer tilfældige tal ud fra en log-normalfordeling, og den forventede værdi er den naturlige logaritmeværdi for den tilfældige variabel.
• d3.randomBates - Generer tilfældige tal fra en Bates-distribution med uafhængige variabler.
• d3.randomIrwinHall - Generer tilfældige tal fra en Irwin – Hall-distribution.
• d3.randomExponential - Generer tilfældige tal fra en eksponentiel fordeling.

Eksempel på tilfældige funktioner i d3

');

Interpolering i D3.js

API-metoder, der anvendes til at interpolere mellem to tilfældige værdier, afhænger af typen af ​​slutværdien b, den generelle syntaks er d3.interpolere (a, b). Nedenfor er en tabel, der viser datatyper af slutværdi b og tilsvarende metode eller funktion, der ændres i henhold til datatypen.

Eksemplet nedenfor forklarer:

• d3.interpolateNumber () -funktion med 10 som startværdi og slutværdi som 20, viste værdier spænder fra startværdi 10 til slutværdi 20 for interpolering af parametre fra (0.0) til (0.5) til (1.0)
• d3.interpolateRgb () -funktion til to forskellige farvenavne, som resulterer i tilsvarende rgb (‘r’, ’g’, ’b’) som resultat, til interpolering af params fra (0.0) til (0.5) til (1.0)
• d3.interpolateDate () -funktionen til to forskellige datoer i formatet 'åååå-mm-dd tt: mm: ss', viser datoer mellem ovennævnte datointerval for interpolering af parametre fra (0.0) til (1.0)

Nedenfor vises et eksempel på interpolering af tal, farver og datoer mellem intervallet.

');

Tekstformatering og internationalisering med D3.js

Tekstformatering og lokalisering kan opnås i D3.js med nummerformat, datoformat og lokalfunktioner som forklaret nedenfor med eksempler.

D3 - lokal ()

d3.locale (definition), returnerer locale specifikt til definition, som standard er locale definitionen amerikansk engelsk for d3.locale (definition),

gratis software til at rippe dvd til mp4

Egenskaberne til nummerformatering til landedefinitionen er angivet nedenfor.

• decimal: Decimaltegnet anvendes normalt i valutaer som 25,75 ( For eksempel. '.').
• tusinder: Tusind er en identifikator eller en separator, der bruges som komma efter tusind værdier som 2.475 ( For eksempel. ',').
• gruppering: Group of Array for hver gruppe og størrelsen kan kontrolleres ved hjælp af Arrayname (5), hvor 5 er et indeks, og arraystørrelsen er 6 medlemmer.
• betalingsmiddel: Præfiks og suffiks for valutastrengene ( For eksempel. ('$', '')).
• dato tid: Format for dato og klokkeslæt (% c) har dato og klokkeslæt ( For eksempel. '% A% b% e% X% Y').
• dato: Datoen (% x) ( For eksempel. “% M /% d /% Y”) formatstreng i måned dag og år.
• tid: Tiden (% X) ( For eksempel. “% H:% M:% S”) formatstreng i timer minutter og sekunder.
• perioder: Lokalets A.M. og P.M. ækvivalenter ( For eksempel. (“AM”, “PM”)).
• dage: Ugedage, startende med søndag, i alfabet.
• korte dage: Korte dage eller forkortede navne som SUN, MON osv. På hverdage, startende med søndag.
• måneder: Månedens fulde navne som oktober (startende i januar).
• korte måneder: Korte måneder eller forkortede navne som JAN, FEB, MAR osv. I månederne (startende med januar).

Alle parametre, der er forklaret ovenfor, vises som variabler med deres respektive værdier i det følgende billede.

D3.format

d3.format fra JavaScript-biblioteket tager et tal som inputargument, syntaksen er d3.format (specifier), for at transformere tal bruges d3.format.

Et eksempel på anvendelse af format baseret på d3 er angivet nedenfor.

Ændring med datoformater med D3.js

Tidsformatering ved hjælp af D3.js-biblioteket, hvor d3.timeParse kan anvendes med jokertegn, dvs. regelmæssigt udtryk, der hjælper med at konvertere input-tidsformat til det ønskede format.

Et eksempel på formatet relateret til tid og dato er angivet nedenfor.

');

Konklusion

I denne vejledning har vi dækket alle de resterende vigtige metoder til D3.js som databinding, hvor data i form af en matrix og sammenføjning, indlæsning og parsedata er i CSV-, JSON- og XML-format.

Vi diskuterede også manipulation ved hjælp af tilfældige tal og interpoleringsmetode for at visualisere datagrupper i diagrammer eller grafer og formatere tekst og lokalisering ved hjælp af d3.locale-metoder til numre, dato, tid og forskellige lokalvalutaer.

Anbefalet læsning

• JavaScript-injektionsvejledning: Test og forhindre JS-injektionsangreb på webstedet
• TOP 45 JavaScript-spørgsmål med detaljerede svar
• 10 bedste API-testværktøjer i 2021 (SOAP og REST API-testværktøjer)
• API-testvejledning: En komplet guide til begyndere
• Rest API-responskoder og typer af hvileanmodninger
• REST API-test med agurk ved hjælp af BDD-tilgang
• Rest API Tutorial: REST API Architecture And Constraints
• Top 10 bedste API-styringsværktøjer med funktionssammenligning
• Top 20 mest vigtige API-test Interviewspørgsmål og svar