Tanuljon meg vonaldiagramot készíteni a D3.js használatával

Használja a D3.js erejét az adatok gyönyörű ábrázolásához.

A D3.js egy nyílt forráskódú JavaScript könyvtár, amelyet gyönyörű adatábrázolások létrehozására használnak, amelyeket bármely modern böngészőben megtekinthetünk. A D3.js használatával különféle diagramokat és grafikonokat hozhatunk létre adatainkból.

Ebben az oktatóanyagban létrehozunk egy vonaldiagramot, amely bemutatja az elmúlt hat hónap Bitcoin árindexét. Adatokat fogunk behúzni egy külső API-ból, és vonaldiagramot készítünk címkékkel és tengellyel a DOM-on belül.

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

Elkezdeni

Először a D3.js könyvtárat importáljuk közvetlenül a HTML-n belül található CDN-ről.

Címkét is felvettünk a HTML-fájlunkba, hogy létrehozzuk benne a vonaldiagramot a D3.js segítségével

Most lépjünk a JavaScript kód megírása felé. Először is a DOM betöltését követően egy külső API-ról szeretnénk betölteni a Bitcoin árindex adatainkat.

Adatok lekérése

var api = '//api.coindesk.com/v1/bpi/historical/close.json?start=2017-12-31&end=2018-04-01';
document.addEventListener("DOMContentLoaded", function(event) { fetch(api) .then(function(response) { return response.json(); }) .then(function(data) { //DO SOMETHING WITH DATA })});

A fenti kódban azt a fetchmódszert használjuk, hogy külső API-ból nyerjük az adatokat. Ezután a .json()módszerrel elemezzük .

Ezeket az adatokat most kulcs / érték párokba szeretnénk konvertálni úgy, hogy azok formátuma a date:price. Ehhez elküldjük adatainkat egy másik függvénynek, amely elemzi és visszaadja a kívánt formában.

Adatok elemzése

.....then(function(data) { var parsedData = parseData(data) })
function parseData(data) { var arr = []; for (var i in data.bpi) { arr.push( { date: new Date(i), //date value: +data.bpi[i] //convert string to number }); } return arr;}

Adatainkat egy olyan függvénynek parseDataadjuk át, amely egy másik objektumtömböt ad vissza. Minden objektum tartalmaz egy dátumot és a bitcoin árát az adott napon.

Amint megkapjuk az adatokat a szükséges formátumban, elküldjük ezeket az adatokat annak a drawChartfüggvénynek, amelyben a maradék kódot a D3.js segítségével írjuk a vonaldiagram megjelenítéséhez.

.....then(function(data) { var parsedData = parseData(data); drawChart(parsedData);})

Válassza ki az SVG elemet

A drawChartfunkcióban mindenekelőtt kiválasztjuk az SVG elemünket, és bizonyos stílusokat biztosítunk számára.

function drawChart(data) {
 var svgWidth = 600, svgHeight = 400; var margin = { top: 20, right: 20, bottom: 30, left: 50 }; var width = svgWidth - margin.left - margin.right; var height = svgHeight - margin.top - margin.bottom;
 var svg = d3.select('svg') .attr("width", svgWidth) .attr("height", svgHeight);...

A fenti kódban úgy állítjuk be az SVG tároló szélességét és magasságát, hogy először a select()metódussal választjuk ki, majd a attr()metódussal hozzárendeljük az attribútumokat.

Meghatároztuk a margókat is, és értékeiket felhasználjuk az SVG konténer szélességi és magassági attribútumainak kiszámításához. Ezek a margóértékek később segítségünkre lesznek a diagramunk megfelelő elhelyezésében és megfelelő megjelenítésében.

A CSS használatával határokat adtunk az SVG-tárolónknak:

 .line-chart { border: 1px solid lightgray; }

Eddig még nincs semmi a DOM-on belül:

Ezután létrehozunk egy csoport elemet a vonaldiagram, tengely és címkék megtartására.

Csoportelem létrehozása és átalakítása

...var g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")" );

Az elemek csoportosítása segít a hasonló vagy kapcsolódó elemek együttes szervezésében. Itt egy csoportelem renderelése után biztosítunk némi átalakítást.

A D3 különféle lehetőségeket kínál számunkra az elemeink átalakítására. A fenti kódban a translatetulajdonságot használjuk arra, hogy a bal és felső margókkal rendelkező csoportelemet áthelyezzük.

Mérleg hozzáadása

Most szeretnénk mérlegeket hozzáadni a diagramunkhoz.

var x = d3.scaleTime().rangeRound([0, width]);
var y = d3.scaleLinear().rangeRound([height, 0]);

Mint tudjuk, adataink dátumokból és a Bitcoin értékéből állnak ezeken a dátumokon. Ezért feltételezhetjük, hogy az x tengely tartalmazza a dátumokat, az y tengely pedig értékeket. Így láthatjuk a vonaldiagram variációját az idő függvényében.

Így a fenti kódrészletben létrehoztunk egy idő-skálát az x-tengelyen és a lineáris -t az y-tengelyen. Ezeket a mérlegeket az SVG konténer szélességének és magasságának megfelelő tartományokkal is ellátjuk.

Hozzon létre egy vonalat

Most haladjunk a vonalunk meghatározása felé a d3.linemódszer segítségével. Meghatározzuk a vonal x és y attribútumait anonim függvények átadásával, és az adott nap dátumobjektumának és bitcoin értékének visszaadásával.

var line = d3.line() .x(function(d) { return x(d.date)}) .y(function(d) { return y(d.value)}) x.domain(d3.extent(data, function(d) { return d.date })); y.domain(d3.extent(data, function(d) { return d.value }));

Függelék tengelyek

A vonaldiagramhoz most hozzá fogjuk csatolni a bal és alsó tengelyünket a csoport elemünkön belül. A bal tengely a bitcoin értékét fogja képviselni, míg az alsó tengely a megfelelő dátumot jeleníti meg.

g.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)) .select(".domain") .remove();

In the above code, we are appending a group element inside our main group and translating it at the very bottom our container. Then, we pass d3.axisBottom method in the call function where d3.axisBottom takes the parameter of x which is defined in the Add Scales section.

g.append("g") .call(d3.axisLeft(y)) .append("text") .attr("fill", "#000") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", "0.71em") .attr("text-anchor", "end") .text("Price ($)");

Similar to the bottom axis, we append another group element and then call on it the d3.axisLeft method which takes the parameter of y. Then, we also style our axis by assigning it different attributes and a label.

If we save and refresh the page, we can see our axes being rendered inside the DOM:

Append a Path

In the last step, we will be appending a path inside our main group element. This path will actually draw the line chart as per the values of the data.

We pass our dataset using the datum method and then set the attributes of fill color, stroke color, and width. In the end, we set the attribute of d which actually gives instruction to the SVG path about where to connect the points of the path.

g.append("path").datum(data).attr("fill", "none").attr("stroke", "steelblue").attr("stroke-linejoin", "round").attr("stroke-linecap", "round").attr("stroke-width", 1.5).attr("d", line);

Here is the final result:

Conclusion

Congratulations! We have successfully created the line chart using D3.js. You can check out the official documentation of D3.js to learn more about different charts and graphs you can create.

If you’re interested in learning more about D3.js, be sure to check out our free course on Scrimba.

I am Sohaib Nehal. I am a Full-Stack Web Application Developer. You can reach me at [email protected] or on Twitter @Sohaib_Nehal. Thank you :-)