Share
În partea anterioară a acestei serii, am văzut cum să începeți să creați o diagramă cu mai multe linii utilizând biblioteca JavaScript D3.js. În acest tutorial, vom trece la nivelul următor, făcând diagrama multi-linie să răspundă în mod dinamic la date și vom adăuga mai multe funcții pe măsură ce progresează tutorialul.
Să începem prin clonarea primei părți a tutorialului de la GitHub.
git clone https://github.com/jay3dec/MultiLineChart_D3.git
Navigheaza catre MultiLineChart_D3 și răsfoiți index.html, și ar trebui să aveți un grafic multi-linie bazat pe datele eșantionului.
În tutorialul anterior, când am creat XScale și yScale utilizând Gamă și Domeniu, am codificat greu minimul și maximul pentru domeniu. Pentru a face graficul mai flexibil, trebuie să citim dinamic valorile minime și maxime pentru domeniu din sursa de date.
D3.js furnizează d3.min și d3.max metode pentru a obține valorile minime și maxime dintr-o matrice. Vom folosi aceste funcții pentru a obține valorile minime și maxime pentru domeniu.
Putem obține valoarea minimă dintr-un matrice după cum se arată:
d3.min (date, funcție (d) retur d.value;)
În mod similar, pentru a obține valoarea maximă:
d3.max (date, funcție (d) return d.value;)
Pur și simplu înlocuiți valorile minime și maxime în XScale domeniu, după cum se arată:
xscale = d3.scale.linear () domeniu ([MARGINS.left, WIDTH - MARGINS.right]) .domeniu ([d3.min (date, functie (d) return d.year; (date, funcție (d) retur d.aear;)]),
În mod similar, înlocuiți yScale domeniu:
yScale = d3.scale.linear () domeniu ([HEIGHT - MARGINS.top, MARGINS.bottom]) .domeniu ([d3.min (data, funcția (d) return d.sale; (date, funcție (d) return d.sale;)]),
Salvați toate modificările și navigați index.html. Acum ar trebui să aveți graficul să funcționeze bine, așa cum a fost mai devreme. Singura diferență constă în faptul că ia dinamic valorile maxime și minime ale domeniului.
Păstrarea unui singur obiect JSON pentru eșantion ar face mai ușor să analizăm datele și să-l reprezentăm pe diagramă. Deci, combinați cele două fragmente de date de probă într-un singur șir de date JSON, după cum se arată mai jos:
var data = ["Client": "ABC", "vânzare": "202", "anul": "2000" : "2002", "Client": "ABC", "vânzare": " Anul ":" 2008 ", " Client ":" ABC "," vânzare ":" 176 " , "anul": "2010", "Client": "XYZ", "vânzare": "100", " 215 "," anul ":" 2004 ", " Client ":" XYZ "," vânzare " : "Anul": "2008", "Client": "XYZ", " vânzare ":" 176 "," anul ":" 2013 "];
Acum vom modifica codul nostru pentru a face scala graficului dinamic ca pe setul de date și valorile sale.
Apoi vom împărți și organiza datele bazate pe Client astfel încât să putem desena un grafic pentru fiecare Client în date. D3 oferă o metodă numită d3.nest care ajută la aranjarea datelor bazate pe un anumit cheie camp. Vom folosi d3.nest pentru a sorta datele bazate pe Client așa cum se arată:
var dataGroup = d3.nest () .key (funcția (d) return d.Client;) .entries (data);
Iată cum Datagroup ar arata:
"cheie": "ABC", "valori": "Client": "ABC", "vânzare": "202", "anul": "2000"; vânzarea: "179", "anul": "2004", "Client": "ABC" "", "anul": "2006", "Client": "ABC", "vânzare": "134", " "ABC", "vânzare": "176", "anul": "2010"], "cheie": "XYZ", "valori": [Client; "100", "anul": "2000", "Client": "XYZ", "vânzare": "215", "anul": "2002" "", "Client": "XYZ", "vânzare": "199", "anul": "2004"; "vânzare": "134", "anul": "2008", "Client": "XYZ", "vânzare"
Apoi, scoateți svg line cod de cale pentru crearea de linii pe care am codificat greu anterior.
Accentsconagua
("cursa") .attr ("curse-width", 2) .attr ('fill' , 'nici unul'); (de la 'stroke', 'blue') .attr ('stroke-width', 2) .attr ('fill' , 'nici unul');În schimb, vom repeta imaginea Datagroup și să creați un grafic pentru fiecare Client așa cum se arată:
dateGroup.forEach (funcția (d, i) vis.append ('svg: calea') .attr ('d', lineGen (d.values)) .attr (' latimea cursei ", 2) .attr ('fill', 'none'););Salvați modificările și încercați să navigați index.html. Ar trebui să puteți vedea diagrama cu mai multe linii după cum se arată:
Să adăugăm, de asemenea, câteva culori aleatorii la liniile de grafic. Pentru a adăuga culori aleatorii, vom folosi metoda d3.hsl. Modificați accident vascular cerebral atributul graficului de linie, după cum se arată mai jos, pentru a obține culori aleatorii pentru linii.
dateGroup.forEach (funcția (d, i) vis.append ('svg: calea') .attr ('d', lineGen (d.values) "hsl (" + Math.random () * 360 + ", 100%, 50%)";) .attr ('stroke-width', 2) .attr (' ;Salvați modificările și răsfoiți index.html. Ar trebui să vedeți culori aleatorii pentru liniile de pe grafic.
Apoi, vom adăuga legende pentru Clienți în datele din eșantion. După adăugarea legendelor, vom atașa un eveniment de clic pe legendele care ar schimba afișarea graficelor respective.
În primul rând, pentru a adăuga legenda, trebuie să modificăm marginea inferioară și marginea de sus la 50 pentru a se potrivi cu legendele.
var vis = d3.select, WIDTH = 1000, HEIGHT = 500, MARGINS = top: 50, dreapta: 20, jos: 50, left: 50,
În timp ce iterăm Datagroup, vom adăuga legendele pentru graficele de linie corespunzătoare. Adăugarea legendelor este destul de simplă. Mai întâi, definiți spațiul legendei bazat pe numărul de clienți sau graficele liniare pe care le vom desena:
lSpace = WIDTH / dataGroup.length;
Adăugați un text în elementul svg cu coordonatele x și y în timp ce iterați Datagroup după crearea liniei după cum se arată:
vis.append ("text") .attr ("x", (lSpace / 2) + i * lSpace) .attr ("y", HEIGHT). cheie);Am ajustat distanța dintre legende (lSpace) Pe baza numărului de legende pe care trebuie să le arătăm, astfel încât toate legendele să fie distanțate la o distanță egală. Am împărțit legenda cu 2 astfel încât centrul său să fie aliniat în spațiul său și va fi așa cum progresează înainte, după cum adăugăm (i * lSpace) la legendele viitoare.
Salvați toate modificările și încercați să răsfoiți index.html și ar trebui să vedeți legendele de sub axa X.
Să adăugăm un pic de stil pe legende pentru a le face să arate îndrăzneț. Adăugați următorul CSS la index.html:
.legenda font-size: 14px; font-weight: bold;
Adăugați clasa legendă la legenda creată.
("text") .attr ("x", (lSpace / 2) + i * lSpace) .attr ("y", HEIGHT) "," legenda ") .text (d.key);
Acum, să adăugăm evenimente de clic pe fiecare dintre legendele afișate pentru a comuta afișarea liniei corespunzătoare pe graficul multi-linie.
În primul rând, va trebui să adăugăm un id pentru fiecare grafic de linie creat pentru a comuta afișajul acestuia.
.attr ('id', 'linia _' + d.key)Iată cum arată codul de creare a liniei:
"d", "line" (d.values, xScale, yScale)) .attr ("cursă", funcție (d, j) return "hsl (" + Math. aleator () * 360 +, 100%, 50%) ";) .attr (" cursa-width ", 2) .attr ('id', 'line_' + d.key) , 'nici unul');Apoi, în partea de creare a legendei, adăugați clic atribut:
.pe ("faceți clic", funcția () alert (d.key);)Salvați schimbarea și răsfoiți index.html. Faceți clic pe legende și ar trebui să vedeți numele legendelor ca alerte.
Apoi, să adăugăm codul pentru a comuta afișarea liniei. Trebuie doar să verificăm starea curentă de afișare a graficului de linie și să comutați opacitatea pentru a afișa și a ascunde linia în consecință.
.pe ("clic", funcția () var activ = d.activ? false: true; var opacitate = activ? 0: 1; d3.select (" opacitate); d.active = active;)Salvați modificările și încercați să navigați index.html. Încercați să faceți clic pe legende, iar afișarea graficului corespunzător trebuie să se comute.
În acest tutorial, am văzut cum să facem dinamica graficului nostru multi-linie. De asemenea, am văzut cum să creați evenimentele D3.js. Pentru informații detaliate despre diverse alte metode D3.js și API-uri, consultați documentația oficială.
Codul sursă din acest tutorial este disponibil pe GitHub.
Spuneți-ne gândurile dvs. în comentariile de mai jos!
