de Sohaib Nehal

Aflați D3.js în 5 minute

O introducere în crearea reprezentărilor vizuale ale datelor dvs.

Aflati D3js in 5 minute

D3.js este o bibliotecă JavaScript utilizată pentru manipularea documentelor pe baza datelor. Folosește HTML, CSS și SVG pentru a crea reprezentări vizuale ale datelor care pot fi vizualizate pe orice browser modern.

De asemenea, oferă câteva funcții minunate pentru interacțiuni și animații.

În acest tutorial, vom explora conceptele și caracteristicile de bază ale D3.js. Vom învăța cum să-l folosim cu ajutorul câtorva exemple, cum ar fi redarea unei diagrame, redarea elementelor HTML și SVG și aplicarea transformărilor și evenimentelor acestora.

De asemenea, am creat un curs gratuit în 10 părți pe D3.js pe Scrimba. Verifică-l aici.

ad-banner

Noțiuni introductive despre D3

Deoarece D3.js este o bibliotecă JavaScript, o puteți include pur și simplu în fișierul HTML într-o etichetă de script.

<script src="https://d3js.org/d3.v4.min.js"></script>

sursă completă și teste sunt, de asemenea, disponibile pentru descărcare pe GitHub.

Selecția DOM

Folosind D3.js, putem manipula Modelul de obiect document (DOM), ceea ce înseamnă că putem selecta elemente și le putem aplica diverse transformări.

Să începem cu un exemplu simplu, în care vom folosi D3 pentru a selecta și modifica culoarea și dimensiunea fontului unei etichete de titlu.

<html>
<head>
    <title>Learn D3 in 5 minutes</title>
</head>
<body>

<h3>Today is a beautiful day!!</h3>

<script src="https://d3js.org/d3.v4.min.js"></script>

<script>
    d3.select('h3').style('color', 'darkblue');
    d3.select('h3').style('font-size', '24px');
</script>
</body>
</html>

Deci, pur și simplu înlănțuim select() metoda pe d3 obiect și apoi urmăriți cu style(). Primul parametru dictează ce vrem să schimbăm, iar al doilea dă valoarea. Iată rezultatul:

1611764106 88 Aflati D3js in 5 minute
Exemplul 1: Selecția DOM

Legarea datelor

Următorul concept pe care va trebui să îl învățați este legarea datelor, deoarece aceasta este una dintre cele mai interesante caracteristici ale D3. Folosindu-l, putem popula sau manipula elemente DOM în timp real.

În HTML-ul nostru, avem o listă simplă neordonată <ul>:

<ul> </ul>

Vrem să creăm elementele listei folosind un obiect de date. Iată codul pentru a face exact asta:

<script>
    var fruits = ['apple', 'mango', 'banana', 'orange'];
    d3.select('ul')
        .selectAll('li')
        .data(fruits)
        .enter()
        .append('li')
        .text(function(d) { return d; });
</script>

În codul nostru JavaScript de mai sus, D3 selectează mai întâi fișierul <ul> și orice <li>elemente din interiorul ei folosind select() și selectAll() metode. S-ar putea părea un pic ciudat că le selectăm pe toate li elemente înainte de a le crea, dar așa funcționează D3.

Transmitem apoi datele cu data() și adăugați enter(), care funcționează cam ca o buclă. Totul după acest punct va fi executat o dată pentru fiecare articol din fruits matrice.

Cu alte cuvinte, apoi adaugă un<li>pentru fiecare articol din date. Pentru fiecare <li>tag, adaugă și text în interiorul acestuia folosind text() metodă. Parametrul d în interiorul text() funcția de apel invers se referă la elementul din matrice la iterația dată (măr, mango și așa mai departe).

Iată deci rezultatul nostru final:

1611764106 417 Aflati D3js in 5 minute
Exemplul 2: Legarea datelor

Crearea elementelor SVG

Scalable Vector Graphics (SVG) este o modalitate de a reda elemente grafice și imagini în DOM. Deoarece SVG este bazat pe vectori, este atât ușor, cât și scalabil. D3 folosește SVG pentru a crea toate imaginile sale și, prin urmare, este un element de bază al bibliotecii.

Aici, în exemplul de mai jos, se desenează un dreptunghi folosind D3 într-un container SVG.

//Select SVG element
var svg = d3.select('svg');

//Create rectangle element inside SVG
svg.append('rect')
   .attr('x', 50)
   .attr('y', 50)
   .attr('width', 200)
   .attr('height', 100)
   .attr('fill', 'green');

În acest cod, D3 redă un element dreptunghiular în interiorul DOM. Mai întâi selectează elementul SVG și apoi redă un element dreptunghiular în interiorul acestuia. De asemenea, stabilește coordonatele x și y ale dreptunghiului împreună cu lățimea, înălțimea și proprietățile de umplere folosind attr() metodă.

1611764107 56 Aflati D3js in 5 minute
Exemplul 3: Crearea elementului SVG

Crearea unui grafic cu bare

D3 ne permite, de asemenea, să creăm o mulțime de diferite tipuri de diagrame și grafice pentru a reprezenta datele în moduri eficiente. În exemplul de mai jos, creăm o diagramă simplă cu bare folosind D3.

Să începem prin a crea o etichetă SVG direct în HTML.

<svg width="200" height="500"></svg>

Apoi, vom scrie JavaScript de care avem nevoie pentru a reda graficul cu bare în <svg> etichetă:

var data = [80, 120, 60, 150, 200];

var barHeight = 20;

var bar = d3.select('svg')
          .selectAll('rect')
          .data(data)
          .enter()
          .append('rect')
          .attr('width', function(d) {  return d; })
          .attr('height', barHeight - 1)
          .attr('transform', function(d, i) {
            return "translate(0," + i * barHeight + ")";
          });

În acest cod, avem o serie de numere pe care le vom folosi pentru a reda graficul cu bare. Fiecare element dintr-o matrice ar reprezenta o singură bară. Folosim faptul că barele sunt doar dreptunghiuri cu lățime sau înălțime variabilă.

După selectarea elementelor SVG și dreptunghi, trecem setul nostru de date folosind data() metoda și apelul enter() pentru a începe să se bucle de date.

Pentru fiecare element de date, redăm un dreptunghi și setăm lățimea sa echivalentă cu valoarea sa. Apoi stabilim înălțimea fiecărei bare și, pentru a evita suprapunerea, îi oferim niște umplutură scăzând 1 din barHeight.

Apoi ne transformăm barele folosind proprietatea de traducere care va poziționa fiecare dreptunghi unul după altul, mai degrabă decât să pornească din același punct. transform() preia o funcție de apel invers care obține date și index în parametrii săi. Traducem dreptunghiul pe axa y, înmulțind indexul cu înălțimea barei.

Iată rezultatul:

1611764107 775 Aflati D3js in 5 minute
Exemplul 4: Crearea diagramei cu bare

Gestionarea evenimentelor

În cele din urmă, să analizăm și gestionarea evenimentelor. D3 acceptă, de asemenea, evenimente încorporate și personalizate pe care le putem lega de orice element DOM cu ascultătorul său. În exemplul de mai jos, legăm evenimentul de clic la buton și adăugăm o etichetă de titlu la un corp în gestionatorul de evenimente al acestuia.

d3.select('#btn')
        .on('click', function () {
            d3.select('body')
               .append('h3')
               .text('Today is a beautiful day!!');
        });

Deci, când facem clic pe buton, apare textul de mai jos:

1611764107 297 Aflati D3js in 5 minute
Exemplul 5: gestionarea evenimentelor

Concluzie

D3.js este o bibliotecă JavaScript foarte puternică, dar simplă, care vă permite să jucați și să dați viață documentelor bazate pe date folosind HTML, CSS și SVG.

Există o mulțime de resurse bune disponibile online pentru a învăța D3.js. Există un curs gratuit pe D3.js pe care l-am creat pe Scrimba și este disponibil gratuit aici.

Mulțumesc 🙂

Eu sunt Sohaib Nehal. Sunt dezvoltator de aplicații web Full-Stack. Puteți să mă contactați la sohaib.nehal@ymail.com sau pe Twitter @Sohaib_Nehal. Mulțumesc 🙂