Share
D3.js este o minunată bibliotecă JavaScript care este utilizată pentru a crea grafică interactivă și atrăgătoare. D3.js înseamnă Documente și utilizări bazate pe date HTML, SVG și CSS pentru a-și conduce magia. Din documentele oficiale,
D3.js este o bibliotecă JavaScript pentru manipularea documentelor pe baza datelor. D3 vă ajută să aduceți date la viață folosind HTML, SVG și CSS. Densitatea D3 pe standardele web vă oferă capabilitățile complete ale browserelor moderne fără a vă lega într-un cadru propriu, combinând componente puternice de vizualizare și o abordare bazată pe date la manipularea DOM.
Acest tutorial va fi un tutorial introductiv pe D3.js în care ne vom concentra pe câteva lucruri de bază pentru a crea un grafic dinamic. De-a lungul acestui tutorial, vom vedea cum să creați o diagramă cu mai multe linii folosind biblioteca D3.js.
Dacă sunteți în căutarea unei soluții rapide, există o selecție de elemente de diagramă JavaScript pe Envato Market.
Pornind de la doar câțiva dolari, este o modalitate foarte bună de a implementa ceva în câteva minute, ceea ce ar dura mult mai mult pentru a construi de la zero!
Puteți găsi scripturi pentru a crea totul, de la diagrame simple până la infografice complexe.
Elementele grafice JavaScript pe Envato MarketPentru a începe să lucrați cu D3.js, descărcați și includeți D3.js sau puteți să vă conectați direct la cea mai recentă versiune a D3.js.
Vom începe prin crearea axelor X și Y pentru graficul nostru. Vom folosi câteva date de probă pentru a compila graficul.
Aici este codul de bază HMTL de oase goale index.html:
Pentru a începe, vom avea nevoie de câteva date de probă. Iată datele noastre esantionale:
var. date: = "" vânzare ":" 202 "," anul ":" 2000 ", "2003", "vânzare": "2002", "vânzare": "199", "anul" 176 "," anul ":" 2010 "];
Scalable Vector Graphics (SVG) este un format de imagine bazat pe XML pentru desenarea graficii 2D care are suport pentru interactivitate și animație. Vom folosi un svg element pentru a desena graficul nostru. Adaugă svg element în index.html:
Apoi, să definim câteva constante ca lăţime, înălţime, marginea stângă, etc, pe care o vom folosi în timpul creării graficului. D3 oferă o metodă numită d3.select pentru a selecta un element. Vom folosi d3.select pentru a selecta svg element de la index.html.
var vis = d3.select, WIDTH = 1000, HEIGHT = 500, MARGINS = top: 20, dreapta: 20, jos: 20, stânga:,
Pe baza datelor, trebuie să creăm scale pentru axele X și Y. Vom cere valoarea maximă și minimă a datelor disponibile pentru a crea cântare pe axe. D3 oferă o metodă API numită d3.scale.linear pe care o vom folosi pentru a crea scări pentru axe.
d3.scale.linear utilizează două proprietăți numite gamă și domeniu pentru a crea scara. Gamă definește aria disponibilă pentru a face graficul și Domeniu definește valorile maxime și minime pe care trebuie să le complotăm în spațiul disponibil.
xScale = d3.scale.linear () domeniu ([MARGINS.left, WIDTH - MARGINS.right]). domeniu ([2000,2010]),
Gamă a fost specificat în codul de mai sus, astfel încât să nu se aglomereze în jurul marginilor. Valorile maxime și minime pentru domeniu au fost stabilite pe baza datelor de eșantion utilizate.
În mod similar, definiți yScale așa cum se arată:
yScale = d3.scale.linear () domeniu ([HEIGHT - MARGINS.top, MARGINS.bottom]). domeniu ([134,215]),
Apoi, să creăm axele folosind scalele definite în codul de mai sus. D3 oferă o metodă API numită d3.svg.axis pentru a crea axe.
xAxis = d3.svg.axis () .clasă (xScale), yAxis = d3.svg.axis () .scale (yScale);
Apoi, adăugați axa X creată la svg container după cum se arată:
Accentsconagua
vis.append ("svg: g") .call (xAxis); Salvați modificările și încercați să navigați index.html. Ar trebui să aveți ceva de genul:
După cum puteți vedea, axa X este desenată dar are câteva probleme. În primul rând, trebuie să o poziționăm vertical în jos. În timp ce atașăm axa X la containerul SVG, putem folosi proprietatea transformare pentru a muta axa în jos. Vom folosi traduce transformarea pentru a muta axa pe baza coordonatelor. Deoarece trebuie să deplasăm axa X numai în jos, vom furniza coordonatele de transformare pentru axa X ca 0 și axa Y chiar peste marginea.
vis.append ("svg: g") .attr ("transform", "traducere (0," + (HEIGHT - MARGINS.bottom) + ")").Acum, să adăugăm Axa Y. Adăugați următorul cod pentru a adăuga axa Y la containerul SVG:
vis.append ("svg: g") .call (yAxis);Salvați modificările și răsfoiți index.html și ar trebui să aveți ambele axe așa cum este arătat.
După cum puteți vedea în imaginea de mai sus, ecranul Axa Y nu este în poziția corectă. Deci, trebuie să schimbăm orientare din axa Y prezentată mai sus spre stânga. Odată ce axa este aliniată la partea stângă, vom aplica transformarea D3 pentru ao plasa corect, alături de axa X. Adaugă orienta proprietate la yAxis pentru a-și schimba orientarea.
yAxis = d3.svg.axis () .scale (yScale) .orient ("stânga");Aplicați D3 transforma încercând în același timp să atașați Axa Y la containerul SVG:
vis.append ("svg: g") .attr ("transform", "traduce (" + (MARGINS.left) + ", 0)") .call (yAxis);Am păstrat coordonatele y ale traducerii ca 0, deoarece am vrut doar să o deplasăm orizontal. Salvați modificările și răsfoiți index.html. Ar trebui să vedeți ceva de genul:
Pentru a compila datele de probă în graficul nostru, trebuie să aplicăm XScale si yScale la coordonatele pentru a le transforma și a trasa o linie în spațiul de plotare. D3 oferă o metodă API numită d3.svg.line () pentru a desena o linie. Deci, adăugați următorul cod:
var lineGen = d3.svg.line () .x (funcția (d) retur xScale (d.aeară);) .y (funcția (d) return yScale (d.sale);
Așa cum puteți vedea în codul de mai sus, am specificat coordonatele x și y pentru linie ca pe XScale și yScale definit mai devreme.
Apoi, vom adăuga o cale de linie către svg și hartă datele de probă în spațiul de plotare folosind lineGen funcţie. De asemenea, vom specifica câteva atribute pentru linia, cum ar fi accident vascular cerebral culoare, accident vascular cerebral lățime, etc, după cum se arată mai jos:
("cursa") .attr ("curse-width", 2) .attr ('fill' , 'nici unul');Salvați modificările și răsfoiți index.html. Ar trebui să aveți graficul de linie așa cum este prezentat:
Implicit, linia va avea interpolare liniară. Putem specifica interpolarea, precum și să adăugăm niște CSS la axe pentru a face să pară mai bine.
var () (funcția (d) return xScale (d.year);) (funcția (d) return yScale (d.sale);) .interpolate (" bază");Adăugați următorul CSS la index.html:
.axa fill: none; accident vascular cerebral: # 777; modelare: crispEdges; .axis text font-family: Lato; font-size: 13px;
Includeți clasa în ambele xAxis și yAxis:
(0, "+ (HEIGHT - MARGINS.bottom) +") ") .call (" svg: g " xAxis); ()) .attr ("class", "axis") .attr ("transform", " ;Cu bază interpolare și unele CSS, iată cum ar trebui să arate:
Luați în considerare un alt set de date, așa cum este prezentat:
var data2 = ["vânzare": "152", "anul": "2000", "vânzare": "189" "anul": "2004", "vânzare": "199", "anul": "2006", 176 "," anul ":" 2010 "];
Din motive de simplitate, am luat în considerare două seturi diferite de date cu eșantioane cu aceleași date X axă valori. Pentru a complota cele prezentate mai sus data2 pe langa date, trebuie pur și simplu să adăugăm o altă cale SVG către svg element. Singura diferență este că datele au fost scoase la scară lineGen funcţia este data2. Iată cum ar trebui să arate:
(de la 'stroke', 'blue') .attr ('stroke-width', 2) .attr ('fill' , 'nici unul');Salvați modificările și răsfoiți index.html. Ar trebui să puteți vedea diagrama cu mai multe linii după cum se arată:
În acest tutorial, am văzut cum să începeți să creați o diagramă simplă cu mai multe linii utilizând D3.js. În următoarea parte a acestei serii, vom duce acest tutorial la nivelul următor, făcând dinamica diagramă multi-linie și vom adăuga și câteva funcții pentru a face graficul mai interactiv.
Codul sursă din acest tutorial este disponibil pe GitHub.
Spuneți-ne gândurile dvs. în comentariile de mai jos!
