D3.js API-funksjoner - Veiledning med eksempler

d3 js api functions tutorial with examples

Denne opplæringen forklarer forskjellige D3.js API-funksjoner for å legge til funksjoner som databinding, sammenkobling, lasting og parsering av data, interpolering, etc:

D3.js er et open source JavaScript-datavisualiseringsbibliotek som består av forskjellige API-funksjoner som legger til spennende funksjoner som databinding, sammenføyning, lasting og parsering av eksterne data i CSV-, XML- og JSON-format, manipulering av tilfeldige tall, interpolering og tekst formatering og internasjonalisering sammen med ulike funksjoner som animasjon, overgang og grafdannelse for visualisering av data.

hva er det beste nettstedet for nedlasting av mp3 gratis

Du kan se på våre tidligere veiledninger om dette d3-serien å vite mer om funksjonene, fordelene og forutsetningene.

Hva du vil lære:

• Databinding med D3.js
  • Koble til, laste inn og analysere data i D3.js
  • Manipulere tilfeldige tall i D3.js
  • Interpolasjon i D3.js
  • Tekstformatering og internasjonalisering med D3.js
    • D3 - lokal ()
    • D3.format
  • Endring med datoformater med D3.js
• Konklusjon
  • Anbefalt lesing

Databinding med D3.js

For å lage datavisualisering som diagrammer og grafer, er det nødvendig å binde eller koble til data med et DOM-element.

Data kan være en matrise som er en beholder som inneholder numeriske verdier av samme type, som vist nedenfor.

Det første trinnet vil være å lage et SVG-objekt, for å ha et plan eller et rammeverk for å bygge datavisualisering av eksterne data, blir HTML-elementet valgt med d3.select () og legg til SVG som fungerer som et lerret ved å legge til attributter slik som bredde og høyde for lerretet.

Det neste trinnet er innsetting av SVG-element ‘g’ som fungerer som en gruppe som inneholder andre SVG-elementer.

Videre kan du binde eller knytte data til denne SVG-formen festet med lerret ved hjelp av .data (data) -funksjonen.

Neste trinn er å binde data til DOM-elementene ved hjelp av .enter () -metoden til .data (data) -funksjonen.

Videre legger du til SVG-form slik at vi kan feste formen på lerretet.

Et eksempel på databinding er gitt nedenfor.

For å binde data, som i vårt tilfelle er en kontinentvis befolkningstetthet

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

Den variable skjermen tildeles et tegneområde ved å feste SVG-form til html-elementet, som er kroppen i vårt tilfelle.

Den variable skalaen tar skalaLinear () -funksjonen med domene- og rekkeviddeparametere for å plotte en graf for å vise verdier på skalaen i et grafisk format.

.data (infoset) .enter () vil hjelpe til med å binde datasettet vårt tildelt en variabel Infoset.

Tekst legges til for å plotte verdiene mot rektanglene med forskjellige lengder som tilsvarer verdiene i datasettet.

Koble til, laste inn og analysere data i D3.js

D3.js kan laste inn eksterne data eller lokalt i variabler fra forskjellige filtyper og binde disse dataene til DOM-elementer.

Ulike formater for data er CSV, JSON, TSV og XML, mens d3.csv (), d3.JSON (), d3.tsv () og d3.xml () er de respektive metodene som er gitt for å laste datafiler i forskjellige formater fra eksterne kilder ved å sende en http-forespørsel til den angitte url for å laste inn filer eller data i de respektive formatene, samt utføre tilbakeringingsfunksjonen med analyserte respektive dataobjekter.

Syntaksen for å laste CSV-datafilen er som gitt nedenfor.

#1) Den første parameter-url ovenfor er URL-adressen eller serverbanen til csv-filen, som er en ekstern fil som skal lastes inn av d3.csv-funksjonen. i vårt tilfelle er det

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

#to) Den andre parameteren er valgfri

# 3) Den tredje parameteren er tilbakeringing som er en funksjon som kan sendes som et argument av en annen funksjon, og sørger for at spesifikk kode blir utført til en annen kode allerede er ferdig med å kjøres for JSON-, TSV- og XML-format av filen, funksjon d3.csv er erstattet med henholdsvis d3.json, d3.tsv og d3.xml.

Et eksempel på å analysere eksterne data er gitt nedenfor.

Hvis du åpner i Google Chrome-nettleseren, klikker du på F12 og siden oppdateres for å vise konsolloggen fra koden som i vårt tilfelle er console.log (data), som vil vise verdier fra datasettet, med kolonnehoder, filmnavn og år vil vises fra CSV-filen som holdes på serverplasseringen.

Manipulere tilfeldige tall i D3.js

d3 - tilfeldige API-metoder returnerer tilfeldige tall fra forskjellige sannsynlighetsfordelinger, som er en matematisk funksjon, som beregner sjansene for forekomster av forskjellige utfall mulig.

Disse funksjonene bruker primært matematikken. tilfeldig funksjon av JavaScript som produserer tall som faller mellom minimum og maksimalt antall av det angitte området, resulterer det i et unikt tall hver gang matematikken. tilfeldig funksjon blir utført.

• d3.randomUniform - Generer tilfeldige tall fra en jevn fordeling. F.eks. d3.randomUniform (1, 2) () - vil returnere tilfeldige tall inkludert 1 og mindre enn 2.
• d3.randomNormal - Generer tilfeldige tall fra en normalfordeling, F.eks. d3.randomNormal (1, 2) () - returnerer et heltall som er mellom en spesifisert minimumsverdi og maksimumsverdi.
• d3.randomLogNormal - Generer tilfeldige tall fra en log-normalfordeling, og den forventede verdien vil være den naturlige logaritmeverdien for den tilfeldige variabelen.
• d3.randomBates - Generer tilfeldige tall fra en Bates-fordeling, med uavhengige variabler.
• d3.randomIrwinHall - Generer tilfeldige tall fra en Irwin – Hall-distribusjon.
• d3.randomExponential - Generer tilfeldige tall fra en eksponentiell fordeling.

Eksempel på tilfeldige funksjoner i d3

');

Interpolasjon i D3.js

API-metoder som brukes for å interpolere mellom to tilfeldige verdier, vil avhenge av typen sluttverdi b, Generell syntaks er d3.interpolere (a, b). Nedenfor er en tabell som viser datatyper av sluttverdi b, og tilsvarende metode eller funksjon som vil endres i henhold til datatypen.

Eksemplet nedenfor forklarer:

• d3.interpolateNumber () -funksjon med 10 som startverdi og sluttverdi som 20, viste verdier varierer fra startverdi 10 til sluttverdi 20 for interpolering av parametere fra (0.0) til (0.5) til (1.0)
• d3.interpolateRgb () -funksjon for to forskjellige fargenavn som resulterer i tilsvarende rgb (‘r’, ‘g’, ’b’) som et resultat, for interpolering av params fra (0.0) til (0.5) til (1.0)
• d3.interpolateDate () -funksjonen for to forskjellige datoer i formatet ‘åååå-mm-dd tt: mm: ss’, vil vise datoer mellom datoperioden ovenfor, for interpolere params fra (0.0) til (1.0)

Et eksempel på interpolering for tall, farger og datoer mellom området er gitt nedenfor.

');

Tekstformatering og internasjonalisering med D3.js

Tekstformatering og lokalisering kan oppnås i D3.js med tallformat, datoformat og lokalfunksjoner som forklart nedenfor med eksempler.

D3 - lokal ()

d3.locale (definisjon), vil returnere lokalitet spesifikk for definisjon, som standard er lokal definisjonen amerikansk engelsk for d3.locale (definisjon),

prøve test tilfeller i programvaretesting

Egenskapene for tallformatering for lokal definisjon er oppført nedenfor.

• desimal: Desimaltegnet brukes vanligvis i valutaer som 25,75 ( F.eks. '.').
• tusenvis: Tusen er en identifikator eller en skilletegn som brukes som komma etter tusen verdier som 2475 ( F.eks. ',').
• gruppering: Group of Array for hver gruppe og størrelsen kan kontrolleres ved å bruke Arrayname (5), der 5 er en indeks og arraystørrelsen er 6 medlemmer.
• valuta: Prefiks og suffiks for valutastrengene ( F.eks. ('$', '')).
• dato tid: Dato og klokkeslett (% c) vil ha dato og klokkeslett ( F.eks. '% A% b% e% X% Y').
• Dato: Datoen (% x) ( F.eks. “% M /% d /% Y”) formatstreng i månedens dag og år.
• tid: Tiden (% X) ( F.eks. “% H:% M:% S”) formatstreng i Hours Minutes and Seconds.
• perioder: Lokalens A.M. og P.M. ekvivalenter ( F.eks. ('MORGEN KVELD')).
• dager: Ukedager, som begynner med søndag, i alfabet.
• korte dager: Korte dager eller forkortede navn som SUN, MON osv. På ukedagene, fra og med søndag.
• måneder: Månedens fulle navn som oktober (begynner med januar).
• shortMonths: Korte måneder eller forkortede navn som månedene JAN, FEB, MAR osv. (Starter med januar).

Alle parametrene som er forklart ovenfor vises som variabler med deres respektive verdier i det følgende bildet.

D3.format

d3.format fra JavaScript-biblioteket tar et tall som inndata-argument, syntaksen er d3.format (spesifiser), for å transformere tall brukes d3.format.

Et eksempel på bruk av format basert på d3 er gitt nedenfor.

Endring med datoformater med D3.js

Tidsformatering ved hjelp av D3.js-biblioteket, hvor d3.timeParse kan brukes med jokertegn, dvs. vanlig uttrykk som hjelper til med å konvertere inngangsformat til ønsket format.

Et eksempel på formatet relatert til tid og dato er gitt nedenfor.

');

Konklusjon

I denne opplæringen har vi dekket alle de gjenværende viktige metodene for D3.js som databinding der data i form av en matrise og sammenføyning, innlasting og analysering av data er i CSV-, JSON- og XML-format.

Vi diskuterte også manipulering ved hjelp av tilfeldige tall og interpoleringsmetode for å visualisere datagrupper i diagrammer eller grafer, og formatere tekst og lokalisering ved hjelp av d3.locale-metoder for tall, dato, klokkeslett og forskjellige lokale valutaer.

Anbefalt lesing

• JavaScript-injeksjonsveiledning: Test og forhindre JS-injeksjonsangrep på nettstedet
• TOPP 45 JavaScript-intervjuspørsmål med detaljerte svar
• 10 beste API-testverktøy i 2021 (SOAP og REST API-testverktøy)
• API Testing Tutorial: En komplett guide for nybegynnere
• Rest API-responskoder og typer hvileforespørsler
• REST API-testing med agurk ved bruk av BDD-tilnærming
• Rest API Tutorial: REST API Architecture And Constraints
• Topp 10 beste API-styringsverktøy med funksjonssammenligning
• Topp 20 viktigste API-tester Intervju spørsmål og svar