Meni

D3.js API funkcije - Vodič s primjerima

d3 js api functions tutorial with examples

Isprobajte Naš Instrument Za Uklanjanje Problema

Ovaj vodič objašnjava razne funkcije API-ja D3.js za dodavanje značajki kao što su vezivanje podataka, spajanje, učitavanje i raščlanjivanje podataka, interpolacija itd.:

D3.js je JavaScript biblioteka za vizualizaciju podataka otvorenog koda koja se sastoji od različitih API funkcija koje dodaju uzbudljive značajke kao što su povezivanje podataka, spajanje, učitavanje i raščlanjivanje vanjskih podataka u CSV, XML i JSON formatu, manipulacija slučajnim brojevima, interpolacija i tekst formatiranje i internacionalizacija zajedno s raznim funkcijama poput animacije, prijelaza i formiranja grafikona za vizualizaciju podataka.

inicijalizacija statičke varijable c ++

O tome se možete pozvati na naše ranije vodiče d3 serija kako biste saznali više o njegovim značajkama, prednostima i preduvjetima.

API funkcije u D3.js

Što ćete naučiti:

Povezivanje podataka s D3.js

Da bi se stvorila vizualizacija podataka kao što su grafikoni i grafikoni, potrebno je povezati podatke ili ih spojiti s DOM elementom.

Podaci mogu biti niz koji je spremnik koji sadrži numeričke vrijednosti istih vrsta, kao što je prikazano u nastavku.

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

Prvi korak bit će stvaranje SVG objekta, kako bi se imala ravnina ili okvir za izgradnju vizualizacije podataka vanjskih podataka, HTML element se odabire s d3.select () i dodaje SVG koji djeluje kao platno dodavanjem atributa kao što su širina i visina 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)

Sljedeći je korak umetanje SVG elementa ‘g’ koji djeluje poput grupe koja sadrži ostale SVG elemente.

svg.selectAll ('g')

Nadalje, povežite ili pridružite podatke ovom SVG obliku pridruženom platnu, koristeći funkciju .data (podaci).

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

Sljedeći je korak vezivanje podataka za DOM elemente pomoću metode .enter () za funkciju .data (data).

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

Nadalje, dodajte SVG oblik tako da možemo pričvrstiti oblik na platno.

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

Primjer vezivanja podataka dan je u nastavku.

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'); Spajanje, učitavanje i raščlanjivanje podataka u D3.js
Izlaz se bilježi u grafičkom obliku koordinata s povezivanjem podataka

Kako bi se povezali podaci, što je u našem slučaju kontinentna gustoća naseljenosti

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

Zaslon varijable dodjeljuje se području crtanja pričvršćivanjem SVG oblika na html element, koji je u našem slučaju tijelo.

Promjenjivi raspon ljestvice uzima funkciju scaleLinear () s parametrima domene i raspona kako bi se nacrtao grafikon za prikaz vrijednosti na skali u grafičkom formatu.

.data (infoset) .enter () pomoći će u vezivanju našeg skupa podataka dodijeljenog varijabli Infoset.

Tekst se dodaje kako bi se vrijednosti crtale prema pravokutnicima različitih duljina koji odgovaraju njihovim vrijednostima u skupu podataka.

Spajanje, učitavanje i raščlanjivanje podataka u D3.js

D3.js može učitati vanjske podatke ili lokalno u varijable iz različitih vrsta datoteka i povezati ih s DOM elementima.

Različiti formati podataka su CSV, JSON, TSV i XML, dok su d3.csv (), d3.JSON (), d3.tsv () i d3.xml () odgovarajuće metode za učitavanje datoteka podataka u različite formati iz vanjskih izvora slanjem http zahtjeva na navedeni url za učitavanje datoteka ili podataka odgovarajućih formata, kao i izvršavanje funkcije povratnog poziva s raščlanjenim odgovarajućim objektima podataka.

zadana lokalizacija
Vanjski podaci u raznim formatima mogu se prikazati kao što je gore prikazano

Sintaksa za učitavanje CSV datoteke podataka data je u nastavku.

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

# 1) Prvi URL parametra gore je URL ili put poslužitelja csv datoteke koja je vanjska datoteka koju učitava funkcija d3.csv. u našem slučaju jest

http: // localhost: 8080 / primjeri / film_objavljeno.csv

#dva) Drugi parametar nije obavezan

# 3) Treći je parametar Povratni poziv koji je funkcija koju druga funkcija može proslijediti kao argument, osiguravajući izvršenje određenog koda dok drugi kôd već ne izvrši izvršavanje za JSON, TSV i XML formate datoteke, funkcija d3.csv je zamijenjeno d3.json, d3.tsv, odnosno d3.xml.

Primjer raščlanjivanja vanjskih podataka dan je u nastavku.

d3.csv('movie_published.csv', function(data) { console.log(data); });
d3.csv () će učitati CSV datoteku kako je gore prikazano.

Ako se otvori u pregledniku Google Chrome, kliknite F12 i osvježavanje stranice prikazat će zapisnik konzole iz koda koji je u našem slučaju console.log (podaci), koji će prikazati vrijednosti iz skupa podataka, s glavama stupaca, film_name i godinom biti prikazan iz CSV datoteke koja se čuva na mjestu poslužitelja.

Manipuliranje slučajnim brojevima u D3.js

d3 - slučajne API metode vraćaju slučajne brojeve iz različitih raspodjela vjerojatnosti, što je matematička funkcija koja izračunava šanse za moguće različite ishode.

Te se funkcije prvenstveno koriste matematikom. slučajna funkcija JavaScripta koja stvara brojeve koji padaju između minimalnog i maksimalnog broja navedenog raspona, rezultira jedinstvenim brojem svaki put kada se izračuna matematika. izvršava se slučajna funkcija.

  • d3.randomUniform - Generirajte slučajne brojeve iz jednolike raspodjele. Npr. d3.randomUniform (1, 2) () - vratit će slučajne brojeve koji uključuju 1 i manje od 2.
  • d3. slučajniNormalno - generiranje slučajnih brojeva iz normalne raspodjele, Npr. d3.randomNormal (1, 2) () - vratit će cijeli broj koji se nalazi između navedene minimalne vrijednosti i maksimalne vrijednosti.
  • d3.randomLogNormal - Generirajte slučajne brojeve iz log-normalne raspodjele, a očekivana vrijednost bit će prirodna vrijednost logaritma za slučajnu varijablu.
  • d3.randomBates - Generirajte slučajne brojeve iz Batesove distribucije, s neovisnim varijablama.
  • d3.randomIrwinHall - Generiraj slučajne brojeve iz Irwin-Hallove distribucije.
  • d3.randomExponential - Generirajte slučajne brojeve iz eksponencijalne raspodjele.

Primjer slučajnih funkcija u 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)()+'

');

Prikazuje se izlaz d3 slučajnih metoda

Interpolacija u D3.js

API metode primijenjene za interpolaciju između dvije slučajne vrijednosti ovisit će o vrsti završne vrijednosti b, Opća sintaksa je d3.interpolat (a, b). Dolje je dana tablica koja navodi vrste podataka krajnje vrijednosti b i odgovarajuću metodu ili funkciju koja će se mijenjati prema tipu podataka.

Vrsta krajnje vrijednosti bUpotrijebljeni naziv metode
Ako je b generički nizinterpolateArray ()
Ako je b logička vrijednost, nula ili nedefiniranoUpotrijebit će se konstanta b
Ako je b brojinterpolateNumber ()
Ako je b boja ili niz koji se odnosi na bojuinterpolateRgb ()
Ako je b datuminterpolateDate ()
Ako je b nizinterpolateString ()
Ako je b upisani niz brojevainterpolateNumberArray ()
Ako se b odnosi na brojinterpolateNumber ()
InačeinterpolateObject ()

Sljedeći primjer objašnjava:

  • d3.interpolateNumber () funkcija s 10 kao početnom vrijednošću i završnom vrijednošću kao 20, prikazane vrijednosti kreću se od početne vrijednosti 10 do krajnje vrijednosti 20 za paramele interpolacije od (0,0) do (0,5) do (1,0)
  • d3.interpolateRgb () funkcija za dva različita imena boja koja rezultiraju odgovarajućim rgb (‘r’, ’g’, ’b’) vrijednostima za interpolate paramere od (0,0) do (0,5) do (1,0)
  • d3.interpolateDate () funkcija za dva različita datuma u formatu 'yyyy-mm-dd hh: mm: ss', prikazat će datume između gornjeg raspona datuma, za paramele interpolacije od (0,0) do (1,0)

Primjer interpolacije brojeva, boja i datuma između raspona dan je u nastavku.

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 u D3.js za brojeve i boje

Oblikovanje i internacionalizacija teksta s D3.js

Oblikovanje teksta i lokalizacija mogu se postići u D3.js s formatima broja, formata datuma i lokalizacijom, kao što je objašnjeno u nastavku sa primjerima.

D3 - lokalno ()

d3.locale (definicija), vratit će lokalizaciju specifičnu za definiciju, po defaultu je definicija lokalizacije američki engleski za d3.locale (definicija),

alati za popravak i optimizaciju računala 10

Svojstva formatiranja brojeva za definiciju lokalizacije navedena su u nastavku.

  • decimal: Decimalna točka se obično primjenjuje u valutama poput 25,75 ( Npr. '.').
  • tisuće: Tisuća je identifikator ili separator koji se koristi kao zarez nakon tisuću vrijednosti poput 2.475 ( Npr. ',').
  • grupiranje: Skupina polja za svaku grupu i veličina mogu se provjeriti pomoću naziva polja (5), gdje je 5 indeks, a veličina polja 6 članova.
  • valuta: Prefiks i sufiks za nizove valuta ( Npr. ('$', '')).
  • Datum vrijeme: Format datuma i vremena (% c) sadržavat će datum i vrijeme ( Npr. '% A% b% e% X% Y').
  • datum: Datum (% x) ( Npr. '% M /% d /% Y') niz formata u mjesecu Dan i godina.
  • vrijeme: Vrijeme (% X) ( Npr. Niz formata '% H:% M:% S') u Satama minutama i sekundama.
  • razdoblja: Lokalni lokalitet A.M. i P.M. ekvivalenti ( Npr. ('PRIJEPODNE POSLJEPODNE')).
  • dana: Dani u tjednu, počevši od nedjelje, abecednim redom.
  • kratki dani: Kratki dani ili skraćeni nazivi kao što su SUN, PON, itd. Radnim danima, počevši od nedjelje.
  • mjeseci: Puna imena mjeseca su listopad (počevši od siječnja).
  • shortMonths: Kratki mjeseci ili skraćeni nazivi poput JAN, FEB, MAR, itd. Mjeseci (počevši od siječnja).

Svi gore opisani parametri prikazani su kao varijable sa pripadajućim vrijednostima na sljedećoj slici.

Zadana je lokalizacija en_US, ruska lokalizacija (ru_RU) ima konstante datuma, vremena i intervala.

D3.format

d3.format iz JavaScript knjižnice uzima broj kao ulazni argument, sintaksa je d3.format (specifikator), da bi se transformirali brojevi koristi se d3.format.

Primjer primjene formata na temelju d3 dan je u nastavku.

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); });
Oblikovanje primijenjeno za broj i valutu pomoću d3.format

Izmjena formata datuma pomoću D3.js

Oblikovanje vremena pomoću biblioteke D3.js, gdje se d3.timeParse može primijeniti sa zamjenskim znakovima, tj. Regularnim izrazom koji pomaže pretvoriti format ulaznog vremena u željeni format.

Primjer formata koji se odnosi na vrijeme i datum dan je u nastavku.

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

');

Objašnjenje formata datuma i vremena

Zaključak

U ovom smo priručniku pokrili sve preostale bitne metode D3.js-a poput vezivanja podataka gdje su podaci u obliku niza i pridruživanja, učitavanja, kao i podaci za raščlanjivanje u CSV, JSON i XML formatu.

Također smo razgovarali o manipulaciji pomoću slučajnih brojeva i interpoliranoj metodi kako bismo vizualizirali skupine podataka na grafikonima ili grafikonima, te oblikovali tekst i lokalizaciju pomoću d3.locale metoda za brojeve, datum, vrijeme i različite valute lokalnog jezika.

Preporučena literatura

^