Menu

Funkcie API D3.js - návod s príkladmi

d3 js api functions tutorial with examples

Vyskúšajte Náš Nástroj Na Odstránenie Problémov

Tento tutoriál vysvetľuje rôzne funkcie API D3.js na pridanie funkcií, ako je dátová väzba, spojenie, načítanie a analýza dát, interpolácia atď:

D3.js je open-source knižnica na vizualizáciu údajov JavaScriptu, ktorá obsahuje rôzne funkcie API a ktorá pridáva zaujímavé funkcie, ako je väzba údajov, pripojenie, načítanie a analýza externých údajov vo formáte CSV, XML a JSON, manipulácia s náhodnými číslami, interpolácia a text. formátovanie a internacionalizácia spolu s rôznymi funkciami, ako sú animácia, prechod a tvorba grafov na vizualizáciu údajov.

otázky a odpovede na pohovor o zaistení kvality

Môžete si pozrieť naše predchádzajúce návody séria d3 dozvedieť sa viac o jeho vlastnostiach, výhodách a predpokladoch.

Funkcie API v D3.js

Čo sa dozviete:

Väzba údajov s D3.js

Na vytvorenie vizualizácie údajov, ako sú grafy a grafy, je potrebné údaje spojiť alebo spojiť s prvkom DOM.

Dáta môžu byť pole, ktoré je kontajnerom, ktorý obsahuje číselné hodnoty rovnakých typov, ako sú zobrazené nižšie.

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

Prvým krokom bude vytvorenie objektu SVG. Aby bolo možné vytvoriť rovinu alebo rámec na vytváranie vizualizácie údajov externých údajov, prvok HTML sa vyberie pomocou nástroja d3.select () a pridá SVG, ktoré funguje ako plátno pridaním atribútov. napríklad šírka a výška plátna.

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

Ďalším krokom je vloženie prvku SVG „g“, ktorý funguje ako skupina obsahujúca ďalšie prvky SVG.

svg.selectAll ('g')

Ďalej môžete dáta spojiť alebo spojiť s týmto tvarom SVG pripevneným pomocou plátna pomocou funkcie .data (data).

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

Ďalším krokom je vytvorenie väzby údajov na prvky DOM pomocou metódy .enter () s funkciou .data (data).

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

Ďalej pripojte tvar SVG, aby sme mohli tvar pripevniť na plátno.

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

Nižšie je uvedený príklad viazania údajov.

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'); Pripojenie, načítanie a analýza údajov v súbore D3.js
Výstup je zachytený v grafickej podobe súradníc s dátovou väzbou

Aby bolo možné spojiť údaje, čo je v našom prípade kontinentálna hustota obyvateľstva

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

Premenná obrazovka je priradená k oblasti kreslenia pripojením formátu SVG k prvku html, čo je v našom prípade telo.

Variabilné rozpätie mierky má funkciu scaleLinear () s parametrami domény a rozsahu, aby bolo možné vykresliť graf a zobraziť hodnoty na mierke v grafickom formáte.

.data (infoset) .enter () pomôže pri viazaní našej množiny údajov priradenej k premennej infosete.

Pripojí sa text, aby sa hodnoty zobrazili proti obdĺžnikom rôznych dĺžok zodpovedajúcim ich hodnotám v množine údajov.

Spájanie, načítanie a analýza údajov v súbore D3.js

D3.js môže načítať externé údaje alebo lokálne do premenných z rôznych typov súborov a viazať ich na prvky DOM.

Rôzne formáty údajov sú CSV, JSON, TSV a XML, zatiaľ čo d3.csv (), d3.JSON (), d3.tsv () a d3.xml () sú príslušné metódy poskytované na načítanie dátových súborov v rôznych formáty z externých zdrojov zaslaním požiadavky http na zadanú adresu URL, aby sa načítali súbory alebo údaje príslušných formátov a aby sa vykonala funkcia spätného volania s analyzovanými príslušnými údajovými objektmi.

predvolené miestne nastavenie
Ako je uvedené vyššie, je možné zobraziť externé údaje v rôznych formátoch

Syntax na načítanie dátového súboru CSV je uvedená nižšie.

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

# 1) Prvý parameter URL vyššie je URL alebo cesta k serveru súboru CSV, ktorý je externým súborom, ktorý sa má načítať funkciou d3.csv. v našom prípade je

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

#dva) Druhý parameter je voliteľný

# 3) Tretím parametrom je spätné volanie, čo je funkcia, ktorú je možné odovzdať ako argument inej funkcie, a zaistiť tak vykonanie konkrétneho kódu, kým iný kód už nedokončí vykonávanie formátov súboru JSON, TSV a XML, funkcia d3.csv je nahradené súbormi d3.json, d3.tsv a d3.xml.

Nižšie je uvedený príklad analýzy externých údajov.

d3.csv('movie_published.csv', function(data) { console.log(data); });
d3.csv () načíta súbor CSV, ako je zobrazené vyššie.

Ak je otvorený v prehliadači Google Chrome, kliknite na F12 a obnovenie stránky zobrazí protokol konzoly z kódu, ktorý je v našom prípade console.log (data), ktorý zobrazí hodnoty z množiny údajov, s hlavami stĺpcov, názvom filmu a rokom sa majú zobraziť zo súboru CSV uloženého na serveri.

Manipulácia s náhodnými číslami v D3.js

d3 - náhodné metódy API vracajú náhodné čísla z rôznych rozdelení pravdepodobnosti, čo je matematická funkcia, ktorá počíta šance na výskyt rôznych možných výsledkov.

Tieto funkcie primárne využívajú matematiku. náhodná funkcia JavaScriptu, ktorá vytvára čísla, ktoré spadajú medzi minimálny a maximálny počet zadaného rozsahu, má za následok jedinečné číslo zakaždým, keď je matematika. náhodná funkcia sa vykoná.

  • d3.randomUniform - Generujte náhodné čísla z rovnomerného rozdelenia. Napr. d3.randomUniform (1, 2) () - vráti náhodné čísla vrátane 1 a menej ako 2.
  • d3.randomNormálne - Generujte náhodné čísla z normálneho rozdelenia, Napr. d3.randomNormal (1, 2) () - vráti celé číslo, ktoré je medzi zadanou minimálnou hodnotou a maximálnymi hodnotami.
  • d3.randomLogNormálne - Generujte náhodné čísla z log-normálneho rozdelenia a očakávanou hodnotou bude prirodzená hodnota logaritmu pre náhodnú premennú.
  • d3.randomBates - Generujte náhodné čísla z Batesovej distribúcie s nezávislými premennými.
  • d3.randomIrwinHall - Generujte náhodné čísla z distribúcie Irwin – Hall.
  • d3.randomExponential - Generujte náhodné čísla z exponenciálneho rozdelenia.

Príklad náhodných funkcií 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)()+'

');

Zobrazí sa výstup náhodných metód d3

Interpolácia v D3.js

Metódy API použité na interpoláciu medzi dvoma náhodnými hodnotami budú závisieť od typu koncovej hodnoty b, všeobecná syntax je d3.interpolát (a, b). Ďalej je uvedená tabuľka, ktorá obsahuje zoznam dátových typov koncovej hodnoty b a zodpovedajúcu metódu alebo funkciu, ktorá sa bude meniť podľa dátového typu.

Typ konečnej hodnoty bPoužitý názov metódy
Ak b je všeobecné poleinterpolateArray ()
Ak je b logická hodnota, nulová alebo nedefinovanáPoužije sa konštanta b
Ak b je číslointerpolateNumber ()
Ak b je farba alebo povrázok, ktorý odkazuje na farbuinterpolateRgb ()
Ak b je dátuminterpolateDate ()
Ak b je reťazecinterpolateString ()
Ak b je zadaný rad číselinterpolateNumberArray ()
Ak b odkazuje na číslointerpolateNumber ()
InakinterpolateObject ()

Nasledujúci príklad vysvetľuje:

  • d3.interpolateNumber () funkcia s 10 ako začiatočnou hodnotou a konečnou hodnotou ako 20, zobrazené hodnoty sú v rozsahu od počiatočnej hodnoty 10 do konečnej hodnoty 20 pre parametre interpolácie od (0,0) do (0,5) do (1,0)
  • d3.interpolateRgb () funkcia pre dva rôzne názvy farieb, ktorých výsledkom sú zodpovedajúce hodnoty rgb („r“, „g“, „b“), pre interpoláciu parametrov od (0,0) do (0,5) do (1,0)
  • d3.interpolateDate () funkcia pre dva rôzne dátumy vo formáte ‘rrrr-mm-dd hh: mm: ss’, zobrazí dátumy medzi vyššie uvedeným rozsahom dátumov, pre interpolujúce parametre od (0,0) do (1,0)

Nižšie je uvedený príklad interpolácie čísel, farieb a dátumov medzi rozsahmi.

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

');

Interpolácia v D3.js pre čísla a farby

Formátovanie a internacionalizácia textu pomocou formátu D3.js

Formátovanie a lokalizáciu textu je možné dosiahnuť v súbore D3.js pomocou formátu čísel, formátu dátumu a miestnych nastavení, ako je vysvetlené nižšie s príkladmi.

D3 - miestne ()

d3.locale (definícia), vráti miestne nastavenie špecifické pre definíciu, v predvolenom nastavení je definícia miestneho nastavenia v americkej angličtine pre d3.locale (definícia),

prečo je c ++ lepší ako java

Vlastnosti formátovania čísla pre definíciu miestneho nastavenia sú uvedené nižšie.

  • desatinné miesto: Desatinná čiarka sa zvyčajne používa v menách ako 25,75 ( Napr. „.“).
  • tisíce: Tisíc je identifikátor alebo oddeľovač, ktorý sa používa ako čiarka po tisíc hodnotách ako 2 475 ( Napr. „,“).
  • zoskupenie: Skupinu poľa pre každú skupinu a veľkosť je možné skontrolovať pomocou názvu poľa (5), kde 5 je index a veľkosť poľa je 6 členov.
  • mena: Predpona a prípona pre reťazce mien ( Napr. ('$', '')).
  • Dátum Čas: Formát dátumu a času (% c) bude mať dátum a čas ( Napr. „% A% b% e% X% Y“).
  • dátum: Dátum (% x) ( Napr. „% M /% d /% Y“) formátovací reťazec v mesiaci, dni a roku.
  • čas: Čas (% X) ( Napr. „% H:% M:% S“) formátovací reťazec v hodinách, minútach a sekundách.
  • obdobia: Miestny čas A.M. a P.M. ekvivalenty ( Napr. ('DOPOLUDNIA POPOLUDNÍ')).
  • dni: Dni v týždni, začínajúce nedeľou, v abecede.
  • shortDays: Krátke dni alebo skrátené názvy ako SUN, MON atď. Vo všedné dni, začínajúce nedeľou.
  • mesiace: Celé mená mesiaca ako október (počnúc januárom).
  • shortMonths: Krátke mesiace alebo skrátené názvy ako JAN, FEB, MAR atď. V mesiacoch (počnúc januárom).

Všetky parametre vysvetlené vyššie sú zobrazené ako premenné s príslušnými hodnotami na nasledujúcom obrázku.

Predvolené miestne nastavenie je en_US, ruské miestne nastavenie (ru_RU) má konštanty dátumu, času a intervalu.

D3.formát

d3.format z knižnice JavaScript berie číslo ako vstupný argument, syntax je d3.format (špecifikátor), na transformáciu čísel sa používa d3.format.

Nižšie je uvedený príklad použitia formátu založeného na d3.

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); });
Formátovanie použité pre číslo a menu pomocou formátu d3.formát

Úpravy formátov dátumu pomocou súboru D3.js

Formátovanie času pomocou knižnice D3.js, kde d3.timeParse možno použiť so zástupnými znakmi, tj. Regulárnym výrazom, ktorý pomáha prevádzať formát vstupného času do požadovaného formátu.

Nižšie je uvedený príklad formátu týkajúceho sa času a dátumu.

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

');

Vysvetlenie formátu dátumu a času

Záver

V tomto tutoriáli sme sa venovali všetkým zostávajúcim základným metódam D3.js, ako je dátová väzba, kde dáta vo forme poľa a spojenia, načítania a analýzy sú vo formáte CSV, JSON a XML.

Diskutovali sme tiež o manipulácii pomocou náhodných čísel a interpolácie s cieľom vizualizovať skupiny údajov v grafoch alebo grafoch a formátovať text a lokalizáciu pomocou metód d3.locale pre čísla, dátum, čas a rôzne miestne meny.

Odporúčané čítanie

^