Aflati cum sa creati o diagrama cu bare cu D3
Doriți să învățați corect D3? Verifică cursul nostru gratuit de asemenea.

D3.js este cea mai populară bibliotecă JavaScript pentru crearea de reprezentări vizuale a datelor dvs. Cu toate acestea, este puțin dificil să înveți, așa că cred că este important să începi încet.

În acest tutorial, veți afla cum să creați primul dvs. diagramă cu bare cu D3. Vă va oferi o introducere în cele mai importante concepte, în timp ce vă distrați încă construind ceva.

De asemenea, am creat un curs D3.js gratuit pe Scrimba. Verifică-l aici.

Acum să începem.

Conţinut

Pregatirea

Vom folosi cea mai simplă configurare posibilă, pur și simplu importând biblioteca D3 de pe un CDN.

<html>  
  <head>  
    <link rel="stylesheet" href="https://www.freecodecamp.org/news/how-to-create-your-first-bar-chart-with-d3-js-a0e8ea2df386/index.css">  
  </head>  
  <body>  
    <svg></svg>  
    <script src="https://d3js.org/d3.v4.min.js"></script>  
    <script></script>  
  </body>  
</html>

Vom scrie codul nostru D3 în eticheta scriptului. În al doilea rând, am adăugat un <svg> element la DOM. Dacă doriți să vă jucați cu codul în timp ce citiți acest tutorial, verificați acest loc de joacă Scrimba, care conține versiunea finală a codului.

Primul lucru pe care îl vom face este să selectăm acest element și să-l stilizăm puțin.

var svgWidth = 500;  
var svgHeight = 300;

var svg = d3.select('svg')  
    .attr("width", svgWidth)  
    .attr("height", svgHeight)  
    .attr("class", "bar-chart");

Îi dăm o lățime și o înălțime, plus un .bar-chart clasă. În CSS, am conceput clasa astfel:

.bar-chart {  
    background-color: #C7D9D9;  
}

Iată rezultatul:

1612175048 351 Aflati cum sa creati o diagrama cu bare cu D3

Acum avem un container SVG frumos, unde ne putem desena graficul cu bare. Codul pentru a face acest lucru este puțin complex, așa că haideți să analizăm mai întâi totul și apoi să parcurgem fiecare pas:

var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160];

var barPadding = 5;  
var barWidth = (svgWidth / dataset.length);

var barChart = svg.selectAll("rect")  
    .data(dataset)  
    .enter()  
    .append("rect")  
    .attr("y", function(d) {  
        return svgHeight - d  
    })  
    .attr("height", function(d) {  
        return d;  
    })  
    .attr("width", barWidth - barPadding)  
    .attr("transform", function (d, i) {  
         var translate = [barWidth * i, 0];  
         return "translate("+ translate +")";  
    });

selectează tot()

Primul lucru pe care îl facem poate părea cam ciudat, îl facem .selectAll("rect")cu toate acestea, nu am creat încă niciunul <rect> elemente încă. Deci, această metodă returnează o selecție goală (o matrice goală). Cu toate acestea, vom crea <rect> elemente folosind în curând enter().append().

Acest lucru ar putea părea puțin confuz. Dar explicând cum selectAll() funcționează în combinație cu enter().append() se află în afara sferei acestui tutorial. Dacă doriți să o înțelegeți corect, citiți Acest articol cu mare grija.

date()

Înlănțuim apoi data() metoda și trecerea în setul nostru de date. Datele vor dicta înălțimea fiecărei bare.

introduce()

Următorul pas este înlănțuirea enter() metodă. enter() privește atât setul de date în care ați trecut data() și la selecția cu care am făcut selectAll('rect')și apoi încearcă să caute „chibrituri”. Deci, creează o mapare între datele dvs. și DOM.

Dar amintiți-vă, selectAll('rect') metoda a returnat un gol selecție, deoarece nu există <rect> elemente din DOM încă. Cu toate acestea, setul de date are nouă elemente. Deci nu există „chibrituri”.

enter() metoda vă permite apoi să creați un nou <rect> element din DOM pentru fiecare element din setul de date care nu are încă un corespunzător <rect> element.

adăuga()

Pe rândul următor, adăugăm un <rect> element pentru fiecare dintre elemente. După cum urmează această metodă după enter(), va fi de fapt executat de nouă ori, câte unul pentru fiecare punct de date căruia îi lipsește un corespunzător <rect> în DOM.

attr ()

Următorul pas este să decidem forma fiecărui dreptunghi (barele noastre). Trebuie să-i dăm patru atribute: înălțime, lățime, poziție x și poziția y. Vom folosi attr() metodă pentru toate acestea.

Să începem cu poziția y:

.attr("y", function(d) {  
    return svgHeight - d  
})

Primul parametru dictează ce atribut dorim să adăugăm: în acest caz, coordonata y a barei. În al doilea, avem acces la o funcție de apel invers în care vom returna valoarea pe care dorim să o aibă atributul nostru.

Aici, avem acces la punctul de date la acest pas al procesului de iterație (amintiți-vă, această metodă este invocată o dată pe articol în dataset matrice). Punctul de date este stocat în d argument. Vom scădea apoi punctul de date dat, d, de la înălțimea containerului nostru SVG.

Coordonatele X și y sunt întotdeauna calculate începând din colțul din stânga sus. Deci, atunci când scădem înălțimea containerului cu d valoare, obținem coordonata y pentru partea de sus a barei.

Pentru ca bara să se întindă de la acest punct și până la partea inferioară a containerului SVG, va trebui să îi acordăm o înălțime echivalentă cu valoarea punctului de date:

.attr("height", function(d) {  
    return d;  
})

Următorul pas este să îi dai o lățime:

.attr („lățime”, barWidth – barPadding)

Aici, trecem pur și simplu o expresie simplă spre deosebire de funcția de apel invers, deoarece nu avem nevoie de acces la punctul de date. Pur și simplu luăm o bază în barWidth variabilă pe care am creat-o mai sus, care este lățimea totală a containerului împărțită la numărul de bare. Pentru a obține un mic spațiu între fiecare bară, vom scădea și umplutura, pe care am definit-o ca 5.

Ultimul pas este setarea coordonatelor x. Această expresie este puțin mai complexă:

.attr("transform", function (d, i) {  
    var xCoordinate = barWidth * i;  
    return "translate("+ xCoordinate +")";  
});

Aici, profităm în primul rând de un al doilea parametru în callback, i. Acesta este indicele articolului dat din matrice.

Pentru a seta coordonatele pentru fiecare dintre bare, vom înmulți pur și simplu indexul cu barWidth variabil. Apoi vom returna o valoare șir care descrie transformarea pentru axa x, de exemplu "translate(100)". Asta ar împinge bara cu 100 de pixeli spre dreapta.

Și exact așa, aveți primul dvs. grafic de bare în D3.js.

1612175049 874 Aflati cum sa creati o diagrama cu bare cu D3

Dacă sunteți interesat să aflați mai multe despre D3.js, asigurați-vă că consultați cursul nostru gratuit pe Scrimba.


Mulțumesc pentru lectură! Numele meu este Per Borgen, sunt cofondatorul Scrimba – cel mai simplu mod de a învăța să codezi. Ar trebui să verificați bootcamp de design web receptiv dacă doriți să învățați să construiți un site web modern la nivel profesional.

1611011407 121 Aflati TypeScript gratuit cu acest curs interactiv Scrimba
Faceți clic aici pentru a ajunge la bootcampul avansat.