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.
