de Sohaib Nehal

Aflați cum să creați o diagramă liniară utilizând D3.js

Folosiți puterea D3.js pentru a desena reprezentări frumoase ale datelor dvs.

Aflati cum sa creati o diagrama liniara utilizand D3js
Aflați D3.js gratuit pe Scrimba

D3.js este o bibliotecă JavaScript open source utilizată pentru a crea reprezentări de date frumoase pe care le putem vizualiza în orice browser modern. Folosind D3.js, putem crea diferite tipuri de diagrame și grafice din datele noastre.

În acest tutorial, vom crea o diagramă liniară care afișează indicele prețurilor Bitcoin din ultimele șase luni. Vom extrage date dintr-un API extern și vom reda o diagramă liniară cu etichete și o axă în interiorul DOM.

De asemenea, am creat un curs D3.js gratuit pe Scrimba. Verifică-l aici.

Noțiuni de bază

În primul rând, vom importa biblioteca D3.js direct din CDN din HTML-ul nostru.

<html>  <head>    <link rel="stylesheet" href="https://www.freecodecamp.org/news/learn-to-create-a-line-chart-using-d3-js-4f43f1ee716b/index.css">  </head>  <body>    <svg></svg>    <script src="https://d3js.org/d3.v4.min.js"></script>  </body></html>

Am adăugat și un <svg> tag-ul din HTML-ul nostru pentru a crea diagrama liniară în interiorul acestuia folosind D3.js

Să trecem acum la scrierea codului nostru JavaScript. În primul rând, vrem să încărcăm datele noastre despre indicele prețurilor Bitcoin dintr-un API extern odată ce DOM a fost încărcat.

Obțineți date

var api = 'https://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       })});

În codul de mai sus, folosim fetch metodă pentru a obține datele de la un API extern. Apoi îl analizăm folosind .json() metodă.

Acum vrem să convertim aceste date în perechi cheie / valoare, astfel încât acestea să fie în formatul date:price. Pentru aceasta, vom trimite datele noastre către o altă funcție care le va analiza și returna în forma dorită.

Analizați datele

.....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;}

Ne transmitem datele către o funcție parseData care returnează o altă matrice de obiecte. Fiecare obiect conține o dată și prețul bitcoinului la acea dată anume.

Odată ce avem datele în formatul nostru necesar, vom trimite aceste date către drawChart funcție în care tot codul rămas va fi scris folosind D3.js pentru a reda graficul liniar.

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

Selectați elementul SVG

În drawChart funcția, selectăm în primul rând elementul nostru SVG și îi oferim un stil.

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);...

În codul de mai sus, setăm lățimea și înălțimea containerului SVG selectându-l mai întâi folosind select() metoda și apoi folosind attr() metoda de atribuire a atributelor.

De asemenea, am definit marjele și folosim valorile lor în calcularea atributelor de lățime și înălțime ale containerului SVG. Aceste valori de marjă ne vor ajuta ulterior în poziționarea și afișarea corectă a graficului nostru.

Folosind CSS, am dat margini containerului nostru SVG:

<style>    .line-chart    {        border: 1px solid lightgray;    }</style>

Până acum, nu avem încă nimic în interiorul DOM-ului nostru:

1611630306 485 Aflati cum sa creati o diagrama liniara utilizand D3js

În continuare, vom crea un element de grup pentru a menține diagrama de linii, axa și etichetele noastre.

Creați și transformați elementul grupului

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

Gruparea elementelor ajută la organizarea unor elemente similare sau conexe. Aici, după redarea unui element de grup, îi oferim o transformare.

D3 ne oferă diverse opțiuni pentru a ne transforma elementele. În codul de mai sus, folosim translate proprietate pentru a repoziționa elementul grupului nostru cu margini în stânga și în partea de sus.

Adăugați scale

Acum, dorim să adăugăm scale în graficul nostru.

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

După cum știm, datele noastre constau din date și valoarea Bitcoin la acele date. Prin urmare, putem presupune că axa x ar conține datele și axa y ar conține valori. Acesta este modul în care putem vedea variația în diagrama liniară în raport cu timpul.

Astfel, în fragmentul de cod de mai sus, am creat o scară de tip timp pe axa x și tip liniar pe axa y. De asemenea, furnizăm aceste cântare cu intervalele conform lățimii și înălțimii containerului nostru SVG.

Creați o linie

Să trecem acum la definirea liniei noastre folosind d3.line metodă. Vom defini atributele x și y ale liniei trecând în funcții anonime și returnând obiectul de dată și valoarea bitcoin pentru acea zi anume.

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

Atașați Axele

Acum vom adăuga axele noastre stânga și inferioară în interiorul elementului de grup pentru graficul liniar. Axa stângă va reprezenta valoarea bitcoin în timp ce axa inferioară afișează data corespunzătoare.

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

În codul de mai sus, adăugăm un element de grup în grupul nostru principal și îl traducem în partea de jos a containerului nostru. Apoi, trecem d3.axisBottom metoda în funcția de apel unde d3.axisBottom ia parametrul de x care este definit în Adăugați scale secțiune.

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 cu axa inferioară, adăugăm un alt element de grup și apoi apelăm la el d3.axisLeft metoda care ia parametrul de y. Apoi, ne stilizăm și axa atribuindu-i diferite atribute și o etichetă.

Dacă salvăm și actualizăm pagina, putem vedea că axele noastre sunt redate în interiorul DOM:

1611630306 806 Aflati cum sa creati o diagrama liniara utilizand D3js
Axe stânga și inferioară

Adăugați o cale

În ultimul pas, vom adăuga o cale în interiorul elementului nostru principal de grup. Această cale va trage de fapt diagrama liniară conform valorilor datelor.

Trecem setul nostru de date folosind datum metoda și apoi setați atributele culorii de umplere, a culorii liniei și a lățimii. În cele din urmă, setăm atributul lui d care de fapt oferă instrucțiuni căii SVG despre unde să se conecteze punctele căii.

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);

Iată rezultatul final:

1611630306 739 Aflati cum sa creati o diagrama liniara utilizand D3js
Diagramă liniară

Concluzie

Felicitări! Am creat cu succes diagrama liniară folosind D3.js. Puteți consulta documentația oficială a D3.js pentru a afla mai multe despre diferite diagrame și grafice pe care le puteți crea.

Dacă sunteți interesat să aflați mai multe despre D3.js, asigurați-vă că consultați cursul nostru gratuit pe Scrimba.

Eu sunt Sohaib Nehal. Sunt dezvoltator de aplicații web Full-Stack. Puteți să mă contactați la sohaib.nehal@ymail.com sau pe Twitter @Sohaib_Nehal. Mulțumesc 🙂