Meni

Funkcije API-ja D3.js - Vadnica s primeri

  • Glavni
  • Drugo
  • Funkcije API-ja D3.js - Vadnica s primeri

d3 js api functions tutorial with examples

Preizkusite Naš Instrument Za Odpravo Težav

Ta vadnica razlaga različne funkcije API-ja D3.js za dodajanje funkcij, kot so vezava podatkov, združevanje, nalaganje in razčlenitev podatkov, interpolacija itd.:

D3.js je odprtokodna knjižnica za vizualizacijo podatkov JavaScript, ki vsebuje različne funkcije API, ki dodaja zanimive funkcije, kot so vezava podatkov, združevanje, nalaganje in razčlenitev zunanjih podatkov v formatu CSV, XML in JSON, upravljanje naključnih števil, interpolacije in besedila formatiranje in internacionalizacija skupaj z različnimi funkcijami, kot so animacija, prehod in oblikovanje grafov za vizualizacijo podatkov.

osnovna vprašanja za sql intervju in odgovori za sveže

O tem se lahko sklicujete na naše prejšnje vadnice serija d3 če želite izvedeti več o njegovih lastnostih, prednostih in predpogojih.

Funkcije API-ja v D3.js

Kaj se boste naučili:

Vezava podatkov z D3.js

Če želite ustvariti vizualizacijo podatkov, kot so grafikoni in grafi, morate podatke povezati ali združiti z elementom DOM.

Podatki so lahko matrika, ki je vsebnik, ki vsebuje numerične vrednosti istih vrst, kot je prikazano spodaj.

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

Prvi korak bo ustvarjanje predmeta SVG, če želite imeti ravnino ali ogrodje za izdelavo vizualizacije podatkov zunanjih podatkov, se element HTML izbere z d3.select () in doda SVG, ki deluje kot platno z dodajanjem atributov na primer širina in višina platna.

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

Naslednji korak je vstavljanje SVG elementa ‘g’, ki deluje kot skupina, ki vsebuje druge SVG elemente.

svg.selectAll ('g')

Nadalje povežite ali združite podatke s to obliko SVG, pritrjeno s platnom, s funkcijo .data (podatki).

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

Naslednji korak je vezava podatkov na elemente DOM z uporabo metode .enter () s funkcijo .data (data).

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

Nadalje dodajte obliko SVG, tako da jo lahko pritrdimo na platno.

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

Primer vezave podatkov je podan spodaj.

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'); Združevanje, nalaganje in razčlenitev podatkov v D3.js
Izhod je zajet v grafični obliki koordinat z vezavo podatkov

Za vezavo podatkov, kar je v našem primeru celinska pametna gostota prebivalstva

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

Zaslon s spremenljivko se dodeli območju risanja tako, da na element html, ki je v našem primeru telo, pripišemo obliko SVG.

Spremenljiv obseg obsega zajema funkcijo scaleLinear () s parametri domene in obsega, da nariše graf za prikaz vrednosti na lestvici v grafični obliki.

.data (infoset) .enter () bo pomagal pri vezavi našega nabora podatkov, ki je dodeljen spremenljivki Infoset.

Besedilo je dodano, da se vrednosti narišejo v pravokotnike različnih dolžin, ki ustrezajo njihovim vrednostim v naboru podatkov.

Združevanje, nalaganje in razčlenitev podatkov v D3.js

D3.js lahko naloži zunanje podatke ali lokalno v spremenljivke iz različnih vrst datotek in te podatke poveže z elementi DOM.

Različni formati podatkov so CSV, JSON, TSV in XML, medtem ko so d3.csv (), d3.JSON (), d3.tsv () in d3.xml () ustrezne metode za nalaganje podatkovnih datotek v različne formati iz zunanjih virov s pošiljanjem zahteve http na določen url za nalaganje datotek ali podatkov ustreznih formatov ter izvajanje funkcije povratnega klica z razčlenjenimi ustreznimi podatkovnimi objekti.

privzeti jezik
Zunanji podatki v različnih oblikah se lahko prikažejo, kot je prikazano zgoraj

Sintaksa za nalaganje podatkovne datoteke CSV je navedena spodaj.

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

# 1) Prvi URL parametra zgoraj je URL ali pot strežnika datoteke csv, ki je zunanja datoteka, ki jo naloži funkcija d3.csv. v našem primeru je

http: // localhost: 8080 / primeri / film_published.csv

#two) Drugi parameter ni obvezen

# 3) Tretji parameter je povratni klic, ki je funkcija, ki jo lahko kot argument posreduje druga funkcija, pri čemer se prepričajte, da se določena koda izvrši, dokler druga koda že ne zaključi izvajanja za formate datoteke JSON, TSV in XML, funkcija d3.csv je nadomeščena z d3.json, d3.tsv in d3.xml.

Primer razčlenitve zunanjih podatkov je podan spodaj.

d3.csv('movie_published.csv', function(data) { console.log(data); });
d3.csv () bo naložil datoteko CSV, kot je prikazano zgoraj.

Če se odpre v brskalniku Google Chrome, kliknite F12 in osvežitev strani bo prikazala dnevnik konzole iz kode, ki je v našem primeru console.log (data), ki bo prikazal vrednosti iz nabora podatkov, z glavami stolpcev, imenom_filma in letnico biti prikazana iz datoteke CSV, shranjene na mestu strežnika.

Manipuliranje z naključnimi številkami v D3.js

d3 - naključne metode API vrnejo naključne številke iz različnih porazdelitev verjetnosti, kar je matematična funkcija, ki izračuna možnosti za pojav različnih možnih izidov.

Te funkcije uporabljajo predvsem matematiko. naključna funkcija JavaScripta, ki ustvarja števila, ki spadajo med najmanjše in največje število določenega obsega, pri vsakem izračunu pa ima enolično število. naključna funkcija se izvrši.

  • d3.randomUniform - Ustvari naključna števila iz enakomerne porazdelitve. Npr. d3.randomUniform (1, 2) () - vrne naključne številke, ki vključujejo 1 in manj kot 2.
  • d3.naključnoNormalno - Ustvari naključna števila iz običajne porazdelitve, Npr. d3.randomNormal (1, 2) () - vrne celo število, ki je med določeno najmanjšo in največjo vrednostjo.
  • d3.randomLogNormal - Ustvari naključna števila iz logično normalne porazdelitve, pričakovana vrednost pa bo naravna vrednost logaritma za naključno spremenljivko.
  • d3.randomBates - Ustvari naključna števila iz Batesove porazdelitve z neodvisnimi spremenljivkami.
  • d3.randomIrwinHall - Ustvari naključne številke iz Irwin – Hallove porazdelitve.
  • d3.randomExponential - Ustvari naključna števila iz eksponentne porazdelitve.

Primer naključnih funkcij v 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)()+'

');

Prikaže se rezultat d3 naključnih metod

Interpolacija v D3.js

Metode API, uporabljene za interpolacijo med dvema naključnima vrednostma, so odvisne od vrste končne vrednosti b, splošna sintaksa je d3.interpolate (a, b). Spodaj je tabela, v kateri so navedeni podatkovni tipi končne vrednosti b in ustrezna metoda ali funkcija, ki se bo spremenila glede na podatkovni tip.

Vrsta končne vrednosti bUporabljeno ime metode
Če je b generična matrikainterpolateArray ()
Če je b logična, nična ali nedoločenaUporabljena bo konstanta b
Če je b številointerpolateNumber ()
Če je b barva ali niz, ki se nanaša na barvointerpolateRgb ()
Če je b datuminterpolateDate ()
Če je b nizinterpolateString ()
Če je b vtipkana matrika številinterpolateNumberArray ()
Če se b nanaša na številkointerpolateNumber ()
V nasprotnem primeruinterpolateObject ()

Spodnji primer pojasnjuje:

  • d3.interpolateNumber () funkcija z 10 kot začetno vrednostjo in končno vrednostjo 20, prikazane vrednosti se gibljejo od začetne vrednosti 10 do končne vrednosti 20 za interpolirane parametre od (0,0) do (0,5) do (1,0)
  • d3.interpolateRgb () funkcija za dve različni imeni barv, ki imata za posledico ustrezne vrednosti rgb (‘r’, ’g’, ’b’) za interpolirane parametre od (0,0) do (0,5) do (1,0)
  • d3.interpolateDate () funkcija za dva različna datuma v obliki „llll-mm-dd hh: mm: ss“, bo prikazala datume med zgornjim časovnim obdobjem, za interpolacijske parametre od (0,0) do (1,0)

Primer interpolacije števil, barv in datumov med obsegom je podan spodaj.

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)+ '

');

Interpolacija v D3.js za številke in barve

Oblikovanje besedila in internacionalizacija z D3.js

Oblikovanje besedila in lokalizacijo besedila je mogoče doseči v D3.js s funkcijami oblike števila, datuma in področne nastavitve, kot je razloženo spodaj s primeri.

D3 - lokalno ()

d3.locale (definicija), bo vrnil področne nastavitve, specifične za definicijo, privzeto je definicija področne nastavitve ameriška angleščina za d3.locale (definicija),

kateri namizni navidezni stroji delujejo v operacijskem sistemu Windows

Lastnosti formatiranja števil za definicijo področne nastavitve so navedene spodaj.

  • decimalno: Decimalna vejica se običajno uporablja v valutah, kot je 25,75 ( Npr. '.').
  • na tisoče: Thousand je identifikator ali ločilo, ki se uporablja kot vejica po tisoč vrednosti, na primer 2.475 ( Npr. ',').
  • razvrščanje v skupine: Skupino matrike za vsako skupino in velikost je mogoče preveriti z uporabo imena polja (5), kjer je 5 indeks, velikost polja pa 6 članov.
  • valuta: Predpona in pripona za nize valut ( Npr. ('$', '')).
  • Datum čas: V obliki datuma in ure (% c) sta datum in ura ( Npr. '% A% b% e% X% Y').
  • datum: Datum (% x) ( Npr. '% M /% d /% Y') niz oblike zapisa v mesecu Dan in leto.
  • čas: Čas (% X) ( Npr. Niz oblike zapisa 'H:% M:% S') v urah minutah in sekundah.
  • obdobja: Lokalni lokal A.M. in P.M. ekvivalenti ( Npr. ('DOPOLDNE POPOLDNE')).
  • dnevi: Dnevi v tednu, začenši z nedeljo, v abecedi.
  • kratki dnevi: Kratki dnevi ali okrajšana imena, kot so NED, PON, itd. V delovnih dneh, začenši z nedeljo.
  • meseci: Polna imena meseca so oktober (začenši z januarjem).
  • shortMonths: Kratki meseci ali okrajšana imena, kot so JAN, FEB, MAR itd. Mesecev (začenši z januarjem).

Vsi zgoraj pojasnjeni parametri so prikazani kot spremenljivke s pripadajočimi vrednostmi na naslednji sliki.

Privzeti jezik je en_US, ruski jezik (ru_RU) ima konstante datuma, časa in intervala.

D3.format

d3.format iz knjižnice JavaScript vzame številko kot vhodni argument, sintaksa je d3.format (specifikator), za pretvorbo števil se uporablja d3.format.

Primer uporabe oblike, ki temelji na d3, je podan spodaj.

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); });
Oblika je uporabljena za številko in valuto z uporabo d3.format

Spreminjanje z datumskimi formati z D3.js

Oblikovanje časa z uporabo knjižnice D3.js, kjer lahko d3.timeParse uporabite z nadomestnimi znaki, tj. Regularnim izrazom, ki pomaga pretvoriti obliko vhodnega časa v želeno obliko.

Primer oblike, povezane s časom in datumom, je podan spodaj.

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()) +'

');

Pojasnilo datuma in ure

Zaključek

V tej vadnici smo zajeli vse preostale bistvene metode D3.js, kot je vezava podatkov, kjer so podatki v obliki matrike in združevanja, nalaganja ter razčlenjevanja podatkov v obliki CSV, JSON in XML.

Razpravljali smo tudi o manipulaciji z uporabo naključnih števil in metodi interpolacije, da bi vizualizirali podatkovne skupine na grafikonih ali grafih ter oblikovali besedilo in lokalizacijo z metodami d3.locale za številke, datum, uro in različne valute jezika.

Priporočeno branje

^