Tanuljon meg oszlopdiagramot készíteni a D3 segítségével - oktatóanyag kezdőknek

A D3.js a legnépszerűbb JavaScript könyvtár, amely vizuálisan ábrázolja az adatait. Kicsit trükkös azonban megtanulni, ezért fontosnak tartom, hogy halkan kezdjünk.

Ebben az oktatóanyagban megtudhatja, hogyan hozhatja létre az első oszlopdiagramot a D3 segítségével. Bevezetést nyújt a legfontosabb koncepciókba, miközben továbbra is szórakoztatóan épít valamit.

Hoztunk létre egy ingyenes D3.js tanfolyamot is a Scrimbán. Nézze meg itt.

Most kezdjük.

A beállítás

A lehető legegyszerűbb beállítást fogjuk használni, egyszerűen importálja a D3 könyvtárat egy CDN-ről.

A D3 kódunkat beírjuk a script tagbe. Másodszor, hozzáadtunk egy elemet a DOM-hoz. Ha el akarja játszani a kódot, miközben elolvassa ezt az oktatóanyagot, nézze meg ezt a Scrimba játszóteret, amely tartalmazza a kód végleges változatát.

Az első dolog, amit meg fogunk tenni, az, hogy kiválasztjuk ezt az elemet, és egy kicsit megformázzuk.

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

Szélességet, magasságot és .bar-chartosztályt adunk neki . A CSS-ben így alakítottuk az osztályt:

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

Itt az eredmény:

Most van egy szép SVG konténerünk, ahol megrajzolhatjuk az oszlopdiagramunkat. Ennek kódja kissé összetett, ezért először nézzük meg az egészet, majd járjuk végig az egyes lépéseket:

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

mindet kiválaszt()

Az első dolog, amit csinálunk, kissé furcsának tűnhet, megtesszük .selectAll("rect"), azonban még nem hoztunk létre elemeket. Tehát ez a módszer egy üres kijelölést ad vissza (egy üres tömböt). Azonban hamarosan létrehozunk elemeket enter().append().

Ez kissé zavarosnak tűnhet. De arról, hogyan selectAll()működik együtt enter().append()a hatályán kívül ez a bemutató. Ha megfelelően meg akarja érteni, olvassa el nagyon figyelmesen ezt a cikket.

adat()

Ezután láncoljuk a data()módszert és átadjuk az adatkészletünket. Az adatok végül meghatározzák az egyes sávok magasságát.

belép()

A következő lépés a enter()módszer láncolása . Az enter()úgy néz ki, mind az adatbázisba akkor átment data()  , és a kiválasztási tettük selectAll('rect'), majd próbálja meg a „mérkőzést.” Tehát leképezést hoz létre az adatok és a DOM között.

De ne feledje, hogy a selectAll('rect')módszer üres választást adott vissza , mivel a DOM-ban még nincsenek elemek. Az adatkészletnek azonban kilenc eleme van. Tehát nincsenek „mérkőzések”.

A enter()módszer lehetővé teszi, hogy az adatkészlet minden eleméhez hozzon létre egy új elemet a DOM-ban, amelynek még nincs megfelelő eleme.

mellékel()

A következő sorban minden elemhez hozzáfűzünk egy-egy elemet. Mivel ez a módszer ezt követi enter(), valójában kilencszer fog végrehajtódni, egy-egy minden olyan adatponthoz, amelynek nincs megfelelője a DOM-ban.

attr ()

A következő lépés az egyes téglalapok (oszlopok) alakjának eldöntése. Négy attribútumot kell megadnunk neki: magasság, szélesség, x-helyzet és y-helyzet . attr()Mindezekhez a módszert fogjuk használni .

Kezdjük az y-pozícióval:

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

Az első paraméter meghatározza, hogy mely attribútumot szeretnénk hozzáadni: ebben az esetben a sáv y-koordinátáját. A másodikban hozzáférést kapunk egy visszahívási funkcióhoz, amelyben visszaadjuk azt az értéket, amelyre az attribútumunknak szüksége van.

Itt az iterációs folyamat ezen szakaszában hozzáférünk az adatponthoz (ne feledje, hogy ezt a módszert a datasettömbben elemenként egyszer hívják meg ). Az adatpontot az dargumentum tárolja . Ezután kivonjuk a megadott adatpontot, daz SVG konténer magasságából.

Az X és y koordinátákat mindig a bal felső saroktól kezdve számoljuk. Tehát amikor kivonjuk a konténer magasságát az dértékkel, megkapjuk a sáv tetejének y-koordinátáját.

Ahhoz, hogy a sáv ettől a ponttól lefelé nyúlik az SVG konténer aljáig, meg kell adnunk neki az adatpont értékének megfelelő magasságot:

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

A következő lépés egy szélesség megadása:

.attr ("szélesség", barWidth - barPadding)

Itt egyszerűen egy egyszerű kifejezést adunk át, szemben a visszahívási funkcióval, mivel nincs szükségünk hozzáférésre az adatponthoz. Egyszerűen a barWidthtovábbiakban létrehozott változó alapját vesszük, amely a tároló teljes szélessége osztva a sávok számával. Annak érdekében, hogy egy kis rés legyen az egyes rudak között, kivonjuk a párnázást is, amelyet 5-nek definiáltunk.

Az utolsó lépés az x-koordináták beállítása. Ez a kifejezés egy kicsit összetettebb:

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

Itt vagyunk, először is kihasználva a második paraméter a visszahívás, i. Ez a tömb adott elemének indexe.

Az egyes sávok koordinátájának beállításához egyszerűen meg kell szorozni az indexet a barWidthváltozóval. Ezután visszaadunk egy string értéket, amely leírja például az x tengely transzformációját "translate(100)". Ez a sávot 100 pixellel jobbra tolná.

És éppen így van a legelső oszlopdiagram a D3.js-ben.

Ha többet szeretne megtudni a D3.js-ről, nézze meg a Scrimba ingyenes tanfolyamunkat.

Köszönöm, hogy elolvasta! A nevem Per Borgen, a Scrimba társalapítója vagyok - ez a legegyszerűbb módja a kódolás megtanulásának. Tekintse meg adaptív webdesign bootcampunkat, ha meg akarja tanulni a modern weboldal professzionális felépítését.