Meniu

Funcții API D3.js - Tutorial cu exemple

d3 js api functions tutorial with examples

Încercați Instrumentul Nostru Pentru Eliminarea Problemelor

Acest tutorial explică diferite funcții API D3.js pentru a adăuga caracteristici precum legarea datelor, unirea, încărcarea și analizarea datelor, interpolare, etc.:

D3.js este o bibliotecă open-source de vizualizare a datelor JavaScript care cuprinde diverse funcții API care adaugă caracteristici interesante, cum ar fi legarea datelor, unirea, încărcarea și analizarea datelor externe în format CSV, XML și JSON, manipularea numerelor aleatorii, interpolare și text formatarea și internaționalizarea împreună cu diverse funcții, cum ar fi animația, tranziția și formarea graficelor pentru vizualizarea datelor.

configurarea eclipsei pentru c ++

Puteți consulta tutorialele noastre anterioare despre acest lucru seria d3 pentru a afla mai multe despre caracteristicile, avantajele și cerințele sale.

Funcții API în D3.js

Ce veți învăța:

Legarea datelor cu D3.js

Pentru a crea vizualizarea datelor, cum ar fi diagrame și grafice, este necesar să legați sau să uniți date cu un element DOM.

Datele pot fi un tablou care este un container care conține valori numerice de aceleași tipuri, așa cum este afișat mai jos.

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

Primul pas va fi crearea unui obiect SVG, pentru a avea un plan sau un cadru pentru a construi vizualizarea datelor de date externe, elementul HTML este selectat cu d3.select () și se adaugă SVG care acționează ca o pânză prin adăugarea de atribute precum lățimea și înălțimea pânzei.

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

Următorul pas este inserarea elementului SVG „g” care acționează ca un grup care conține alte elemente SVG.

svg.selectAll ('g')

Mai mult, legați sau uniți datele la această formă SVG atașată cu pânză, utilizând funcția .data (date).

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

Următorul pas este legarea datelor la elementele DOM folosind metoda .enter () la funcția .data (date).

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

În plus, adăugați forma SVG, astfel încât să putem atașa forma pe pânză.

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

Un exemplu de legare a datelor este dat mai jos.

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'); Alăturarea, încărcarea și analizarea datelor în D3.js
Ieșirea este capturată sub formă grafică de coordonate cu legarea datelor

Pentru a lega datele, care în cazul nostru este o densitate a populației înțeleaptă pe continent

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

Ecranul variabil este atribuit unei zone de desen prin atașarea formei SVG elementului html, care este corpul în cazul nostru.

Intervalul variabil al scalei ia funcția scaleLinear () cu parametrii domeniului și intervalului pentru a trasa un grafic pentru a afișa valorile pe scară într-un format grafic.

.data (infoset) .enter () va ajuta la legarea setului de date alocat unei variabile Infoset.

Textul este atașat pentru a trasa valorile în raport cu dreptunghiurile de diferite lungimi corespunzătoare valorilor lor din setul de date.

Alăturarea, încărcarea și analizarea datelor în D3.js

D3.js pot încărca date externe sau local în variabile din diferite tipuri de fișiere și pot lega aceste date de elementele DOM.

Diferite formate de date sunt CSV, JSON, TSV și XML, în timp ce d3.csv (), d3.JSON (), d3.tsv () și d3.xml () sunt metodele respective furnizate pentru a încărca fișiere de date în diferite formate din surse externe prin trimiterea unei cereri http către adresa URL specificată pentru a încărca fișiere sau date cu formatele respective, precum și pentru a executa funcția de apel invers cu obiectele de date respective analizate.

locale implicite
Datele externe în diferite formate pot fi afișate așa cum se arată mai sus

Sintaxa pentru încărcarea fișierului de date CSV este cea prezentată mai jos.

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

# 1) Primul URL de parametru de mai sus este adresa URL sau calea serverului fișierului CSV, care este un fișier extern care trebuie încărcat de funcția d3.csv. în cazul nostru, este

http: // localhost: 8080 / exemple / film_publicat.csv

#Două) Al doilea parametru este opțional

# 3) Al treilea parametru este Callback, care este o funcție care poate fi transmisă ca argument de către o altă funcție, asigurându-vă că un cod specific este executat până când un alt cod a terminat deja executarea pentru formatele JSON, TSV și XML ale fișierului, funcția d3.csv este înlocuit cu d3.json, d3.tsv și respectiv d3.xml.

Un exemplu de analiză a datelor externe este dat mai jos.

d3.csv('movie_published.csv', function(data) { console.log(data); });
d3.csv () va încărca fișierul CSV așa cum este afișat mai sus.

Dacă este deschis în browserul Google Chrome, faceți clic pe F12 și reîmprospătarea paginii va afișa jurnalul consolei din codul care în cazul nostru este console.log (date), care va afișa valorile din setul de date, cu capete de coloană, nume_film și anul va fi să fie afișat din fișierul CSV păstrat la locația serverului.

Manipularea numerelor aleatorii în D3.js

d3 - metodele API aleatorii returnează numere aleatorii din diferite distribuții de probabilitate, care este o funcție matematică, care calculează șansele apariției unor rezultate diferite posibile.

Aceste funcții folosesc în primul rând Matematica. funcție aleatorie a JavaScript-ului care produce numere care se încadrează între numărul minim și maxim din intervalul specificat, rezultă un număr unic de fiecare dată când Math. funcția aleatorie este executată.

  • d3.uniform uniform - Generați numere aleatorii dintr-o distribuție uniformă. De exemplu. d3.randomUniform (1, 2) () - va returna numere aleatorii incluzând 1 și mai puțin de 2.
  • d3.aleatoriuNormal - Generați numere aleatorii dintr-o distribuție normală, De exemplu. d3.randomNormal (1, 2) () - va returna un număr întreg care este între o valoare minimă specificată și valori maxime.
  • d3.randomLogNormal - Generați numere aleatorii dintr-o distribuție log-normală, iar valoarea așteptată va fi valoarea logaritmului natural pentru variabila aleatoare.
  • d3.randomBates - Generați numere aleatorii dintr-o distribuție Bates, cu variabile independente.
  • d3.randomIrwinHall - Generați numere aleatorii dintr-o distribuție Irwin-Hall.
  • d3.randomExponential - Generați numere aleatorii dintr-o distribuție exponențială.

Exemplu de funcții aleatorii în 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)()+'

');

Se afișează ieșirea metodelor d3 aleatorii

Interpolare în D3.js

Metodele API aplicate pentru a interpola între două valori aleatorii vor depinde de tipul valorii finale b, sintaxa generală este d3.interpolați (a, b). Dat mai jos este un tabel care listează tipurile de date cu valoarea finală b și metoda sau funcția corespunzătoare care se vor modifica conform tipului de date.

Tipul valorii finale bNumele metodei utilizate
Dacă b este o matrice genericăinterpolateArray ()
Dacă b este boolean, nul sau nedefinitConstanta b va fi folosită
Dacă b este un numărinterpolateNumber ()
Dacă b este o culoare sau un șir care se referă la culoareinterpolaRgb ()
Dacă b este o întâlnireinterpolateDate ()
Dacă b este un șirinterpolateString ()
Dacă b este o matrice de numere tastateinterpolateNumberArray ()
Dacă b se referă la numărinterpolateNumber ()
In caz contrarinterpolateObject ()

Exemplul de mai jos explică:

  • funcția d3.interpolateNumber () cu 10 ca valoare inițială și valoare finală 20, valorile afișate variază de la valoarea inițială 10 până la valoarea finală 20 pentru parametrii interpolați de la (0,0) la (0,5) până la (1,0)
  • funcția d3.interpolateRgb () pentru două nume de culori diferite care au ca rezultat valori corespunzătoare rgb (‘r’, ‘g’, ’b’), pentru interpolarea parametrilor de la (0.0) la (0.5) până la (1.0)
  • funcția d3.interpolateDate () pentru două date diferite în formatul ‘aaaa-ll-zz hh: mm: ss’, va afișa datele cuprinse între intervalul de date de mai sus, pentru parametrii de interpolare de la (0.0) la (1.0)

Un exemplu de interpolare pentru numere, culori și date între interval este dat mai jos.

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

');

Interpolare în D3.js pentru numere și culori

Formatarea textului și internaționalizarea cu D3.js

Formatarea textului și localizarea pot fi realizate în D3.js cu formatul numărului, formatul datei și funcțiile locale, după cum se explică mai jos cu exemple.

D3 - local ()

d3.locale (definiție), va returna locația specifică definiției, în mod implicit, definiția locației este engleza SUA pentru d3.locale (definiție),

software scris în c ++

Proprietățile pentru formatarea numerelor pentru definiția localizării sunt enumerate mai jos.

  • zecimal: Punctul zecimal se aplică de obicei în valute precum 25,75 ( De exemplu. „.”).
  • mii: Mii este un identificator sau un separator care este folosit ca virgulă după o mie de valori precum 2.475 ( De exemplu. „,”).
  • grupare: Group of Array pentru fiecare grup și dimensiunea poate fi verificată folosind Arrayname (5), unde 5 este un index și dimensiunea array este de 6 membri.
  • valută: Prefix și sufix pentru șirurile de valută ( De exemplu. ('$', '')).
  • dataTime: Formatul datei și orei (% c) va avea data și ora ( De exemplu. „% A% b% e% X% Y”).
  • Data: Data (% x) ( De exemplu. „% M /% d /% Y”) șir de format în Luna Zi și An.
  • timp: Timpul (% X) ( De exemplu. „% H:% M:% S”) șir de format în ore, minute și secunde.
  • perioade: A.M. și P.M. echivalente ( De exemplu. ('AM PM')).
  • zile: Zilele săptămânii, începând cu duminica, în alfabete.
  • Zile scurte: Zile scurte sau nume prescurtate, cum ar fi SUN, LUN etc. ale zilelor săptămânii, începând cu duminica.
  • luni: Numele complete ale lunii ca octombrie (începând cu ianuarie).
  • lunile scurte: Luni scurte sau nume prescurtate precum JAN, FEB, MAR etc. ale lunilor (începând cu ianuarie).

Toți parametrii explicați mai sus sunt afișați ca variabile cu valorile lor respective în următoarea imagine.

Locația implicită este en_US, limba rusă (ru_RU) are constante de dată, oră și interval.

D3.format

d3.format din biblioteca JavaScript ia un număr ca argument de intrare, sintaxa este d3.format (specificator), pentru a transforma numerele, se folosește d3.format.

Un exemplu de aplicare a formatului bazat pe d3 este dat mai jos.

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); });
Formatarea a fost aplicată pentru număr și monedă folosind d3.format

Modificarea cu formatele de dată cu D3.js

Formatarea timpului utilizând biblioteca D3.js, unde d3.timeParse poate fi aplicat cu caractere wild card, adică expresie regulată care ajută la convertirea formatului de timp de intrare în formatul dorit.

Un exemplu de format legat de ora și data este dat mai jos.

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

');

Explicația formatului datei și orei

Concluzie

În acest tutorial, am acoperit toate metodele esențiale rămase ale D3.js, cum ar fi legarea datelor, în cazul în care datele sub formă de matrice și unire, încărcare, precum și analizarea datelor sunt în format CSV, JSON și XML.

De asemenea, am discutat despre manipularea folosind numere aleatorii și metoda de interpolare pentru a vizualiza grupurile de date în diagrame sau grafice și pentru a forma textul și localizarea folosind metode d3.locale pentru numerele, data, ora și diferite monede locale.

Lectură recomandată

^