Lær at oprette et søjlediagram med D3 - En tutorial til begyndere

D3.js er det mest populære JavaScript-bibliotek til oprettelse af visuelle repræsentationer af dine data. Det er dog lidt vanskeligt at lære, så jeg synes det er vigtigt at starte blidt.

I denne vejledning lærer du, hvordan du opretter dit allerførste søjlediagram med D3. Det giver dig en introduktion til de vigtigste koncepter, mens du stadig har det sjovt med at bygge noget.

Vi har også oprettet et gratis D3.js-kursus på Scrimba. Tjek det her.

Lad os nu komme i gang.

Opsætningen

Vi bruger den enklest mulige opsætning ved blot at importere D3-biblioteket fra et CDN.

Vi skriver vores D3-kode i scriptetiketten. For det andet har vi tilføjet et element til DOM. Hvis du vil lege med koden, mens du læser denne vejledning, skal du tjekke denne Scrimba-legeplads, som indeholder den endelige version af koden.

Den første ting, vi skal gøre, er at vælge dette element og style det lidt.

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

Vi giver det en bredde og højde plus en .bar-chartklasse. I vores CSS har vi stylet klassen sådan:

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

Her er resultatet:

Nu har vi en dejlig SVG-container, hvor vi kan tegne vores søjlediagram. Koden til at gøre det er lidt kompleks, så lad os først se på det hele og derefter gå gennem hvert trin:

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 +")"; }); 

Vælg alle()

Den første ting, vi gør, kan virke lidt underlige, men vi gør det .selectAll("rect"), men vi har endnu ikke oprettet nogen elementer endnu. Så denne metode returnerer et tomt valg (et tomt array). Vi opretter dog snart elementer ved hjælp af enter().append().

Dette kan virke lidt forvirrende. Men at forklare, hvordan selectAll()fungerer i kombination med, enter().append()ligger uden for omfanget af denne vejledning. Hvis du vil forstå det ordentligt, skal du læse denne artikel meget omhyggeligt.

data()

Vi kæder derefter data()metoden og overfører i vores datasæt. Dataene ender med at diktere højden på hver bjælke.

gå ind()

Det næste trin er at kæde enter()metoden. Den enter()ser både på datasættet du bestået i data()  , og ved valget gjorde vi med selectAll('rect'), og så prøver den at se efter ”kampe.” Så det skaber en kortlægning mellem dine data og DOM.

Men husk, selectAll('rect')metoden returnerede et tomt valg, da der endnu ikke er nogen elementer i DOM. Datasættet har imidlertid ni elementer. Så der er ingen "matches".

Den enter()metode så kan du oprette en ny element i DOM for hvert element i datasættet, der endnu ikke har et tilsvarende element.

Tilføj()

På den næste linje tilføjer vi et element for hver af elementerne. Da denne metode følger efter enter(), vil den faktisk blive udført ni gange, en for hvert datapunkt, der mangler et tilsvarende i DOM.

attr ()

Det næste trin er at bestemme formen på hver af rektanglerne (vores stænger). Vi skal give det fire attributter: højde, bredde, x-position og y-position . Vi bruger attr()metoden til alle disse.

Lad os starte med y-positionen:

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

Den første parameter dikterer, hvilken attribut vi vil tilføje: i dette tilfælde y-koordinaten for bjælken. I det andet får vi adgang til en tilbagekaldsfunktion, hvor vi returnerer den værdi, vi vil have vores attribut.

Her får vi adgang til datapunktet på dette trin i iterationsprocessen (husk, denne metode påberåbes en gang pr. Element i datasetarrayet). Datapunktet er gemt i dargumentet. Vi trækker derefter det givne datapunkt dfra højden af ​​vores SVG-container.

X- og y-koordinater beregnes altid startende fra øverste venstre hjørne. Så når vi trækker containerens højde med dværdien, får vi y-koordinaten til toppen af ​​bjælken.

For at få bjælken til at strække sig fra dette punkt og ned til bunden af ​​SVG-containeren, skal vi give den en højde svarende til datapunktets værdi:

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

Det næste trin er at give det en bredde:

.attr ("bredde", barWidth - barPadding)

Her passerer vi simpelthen et simpelt udtryk i modsætning til tilbagekaldsfunktionen, da vi ikke har brug for adgang til datapunktet. Vi tager simpelthen et grundlag i barWidthvariablen, som vi oprettede længere oppe, som er containerens samlede bredde divideret med antallet af søjler. For at få et lille hul mellem hver af bjælkerne trækker vi også polstring, som vi har defineret som 5.

Det sidste trin er at indstille x-koordinaterne. Dette udtryk er lidt mere komplekst:

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

Her udnytter vi først og fremmest en anden parameter i tilbagekaldet i. Dette er indekset for det givne element i arrayet.

For at indstille koordinaten for hver af bjælkerne multiplicerer vi blot indekset med barWidthvariablen. Vi returnerer derefter en strengværdi, der f.eks. Beskriver transformationen til x-aksen "translate(100)". Det ville skubbe bjælken 100 pixels til højre.

Og bare sådan har du dit allerførste søjlediagram i D3.js.

Hvis du er interesseret i at lære mere om D3.js, skal du sørge for at tjekke vores gratis kursus om Scrimba.

Tak for læsningen! Mit navn er Per Borgen, jeg er medstifter af Scrimba - den nemmeste måde at lære at kode på. Du bør tjekke vores responsive webdesign bootcamp, hvis du vil lære at opbygge et moderne websted på et professionelt niveau.