Bevezetés az adatok vizuális ábrázolásának létrehozásához
A D3.js egy JavaScript könyvtár, amely adatok alapján manipulálja a dokumentumokat. HTML, CSS és SVG segítségével vizuálisan ábrázolja az adatokat, amelyek bármely modern böngészőben megtekinthetők.
Félelmetes funkciókat is nyújt az interakciókhoz és az animációkhoz.
Ebben az oktatóanyagban a D3.js alapfogalmait és jellemzőit tárjuk fel. Megtanuljuk, hogyan kell használni azt néhány példa segítségével, például oszlopdiagram renderelése, HTML és SVG elemek renderelése, valamint transzformációk és események alkalmazása rájuk.
Hoztunk létre egy ingyenes, 10 részes tanfolyamot is a D3.js-n a Scrimba-n. Nézze meg itt.
A D3 használatának megkezdése
Mivel a D3.js egy JavaScript könyvtár, egyszerűen felveheti a HTML fájlba egy szkript címkébe.
A teljes forrás és tesztek letölthetők a GitHubról is.
DOM kiválasztása
A D3.js használatával manipulálhatjuk a Document Object Model (DOM) dokumentumot, vagyis elemeket választhatunk ki és különféle transzformációkat alkalmazhatunk rájuk.
Kezdjük egy egyszerű példával, ahol a D3 segítségével választjuk ki és változtatjuk meg a fejléc címkéjének színét és betűméretét.
Learn D3 in 5 minutesToday is a beautiful day!!
d3.select('h3').style('color', 'darkblue'); d3.select('h3').style('font-size', '24px');Tehát egyszerűen láncoljuk a select()módszert az d3objektumra, majd követjük style(). Az első paraméter meghatározza, hogy mit akarunk változtatni, a második pedig megadja az értéket. Itt az eredmény:
Kötelező adatok
A következő koncepció, amelyet meg kell tanulnia, az adatkötés, mivel ez a D3 egyik legmenőbb tulajdonsága. Használatával valós időben feltölthetjük vagy manipulálhatjuk a DOM elemeket.
HTML-fájlunkban egy egyszerű, rendezetlen lista található <ul>:
Egy adatobjektum segítségével szeretnénk létrehozni a listaelemeket. Itt van a kód pontosan ehhez:
var fruits = ['apple', 'mango', 'banana', 'orange']; d3.select('ul') .selectAll('li') .data(fruits) .enter() .append('li') .text(function(d) { return d; });A fenti JavaScript-kódunkban a D3 először az <ul> an d any-t választja
de it usING s elect() andSelectAII () módszerek. Kicsit furcsának tűnhet, hogy az leösszes li elemet megalkotjuk, mielőtt létrehoznánk őket, de a D3 csak így működik.Ezután átadjuk az adatokat a data()metódussal, és hozzáadjuk enter(), ami úgy működik, mint egy hurok. A pont után mindent a fruitstömb elemenként egyszer végrehajtunk .
Más szavakkal, ezután <az adatok minden eleméhez hozzárendel egy li> -t . Mert every
t usina text () metódus belsejébe . A ed paraméter, insida text () callback függvény a tömb adott iterációban lévő elemére vonatkozik (alma, mang o, és így tovább).Tehát itt van a végeredmény:
SVG elemek létrehozása
A skálázható vektorgrafika (SVG) a grafikus elemek és képek renderelésének módja a DOM-ban. Mivel az SVG vektor-alapú, egyszerre könnyű és méretezhető. A D3 az SVG használatával hozza létre az összes látványtermet, ezért ez a könyvtár alapvető építőköve.
Itt az alábbi példában egy téglalap rajzolódik a D3 használatával egy SVG-tárolóba.
//Select SVG elementvar svg = d3.select('svg');//Create rectangle element inside SVGsvg.append('rect') .attr('x', 50) .attr('y', 50) .attr('width', 200) .attr('height', 100) .attr('fill', 'green');Ebben a kódban a D3 egy téglalap elemet jelenít meg a DOM-on belül. Először kiválasztja az SVG elemet, majd téglalap elemet jelenít meg benne. A attr()módszer segítségével beállítja a téglalap x és y koordinátáit, valamint szélességét, magasságát és kitöltési tulajdonságait .
Sávdiagram készítése
A D3 segítségével sokféle típusú diagramot és grafikont hozhatunk létre, amelyek hatékony módon ábrázolják az adatokat. Az alábbi példában egy egyszerű oszlopdiagramot készítünk a D3 segítségével.
Kezdjük azzal, hogy létrehozunk egy SVG címkét közvetlenül a HTML-fájlban.
Ezután megírjuk a sávdiagram megjelenítéséhez szükséges JavaScript-et
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 + ")"; });In this code, we have an array of numbers which we will use to render our bar chart. Each item in an array would represent a single bar. We make use of the fact that bars are just rectangles with variable width or height.
After selecting the SVG and rectangle elements, we pass our dataset using the data() method and call enter() to start looping on data.
For each data item, we render a rectangle and set its width equivalent to its value. We then set the height of each bar, and to avoid overlapping, we provide some padding to it by subtracting 1 from barHeight.
We then transform our bars using the translate property which will position every rectangle one after another rather than starting from the same point. transform() takes a callback function which gets data and index in its parameters. We translate the rectangle on the y-axis, by multiplying index with the height of the bar.
Here’s the result:
Event Handling
Finally, let’s also look at event handling. D3 also supports built-in and custom events which we can bind to any DOM element with its listener. In the example below, we are binding the click event to the button and appending a heading tag to a body in its event handler.
d3.select('#btn') .on('click', function () { d3.select('body') .append('h3') .text('Today is a beautiful day!!'); });
So when we click the button, the text below appears:
Conclusion
D3.js is a very powerful, yet simple, JavaScript library that allows you to play with and bring life to documents based on data using HTML, CSS, and SVG.
There are a lot of good resources available online to learn D3.js. There is a free course on D3.js which we have created on Scrimba and is available for free here.
Thank you :)
I am Sohaib Nehal. I am a Full-Stack Web Application Developer. You can reach me at s[email protected] or on Twitter @Sohaib_Nehal. Thank you :-)
