Share
I den forrige delen av denne serien så vi hvordan du kommer i gang med å lage et flertallskart ved hjelp av D3.js JavaScript-biblioteket. I denne opplæringen tar vi det til neste nivå ved å gjøre flerlinjediagrammet reagere på data dynamisk, og vi legger til flere funksjoner ettersom opplæringen utvikler seg.
La oss begynne med å klone den første delen av opplæringen fra GitHub.
git klon https://github.com/jay3dec/MultiLineChart_D3.git
Navigere til MultiLineChart_D3 og bla gjennom index.html, og du bør ha en flerlinjediagram basert på utvalgsdataene.
I den forrige veiledningen, da vi opprettet XScale og ySkala ved hjelp av Område og Domene, vi har hardkodet minimum og maksimum for domenet. For å gjøre grafen mer fleksibel må vi lese minimums- og maksimumverdiene for domenet dynamisk fra datakilden.
D3.js gir d3.min og d3.max metoder for å få minimums- og maksimumverdiene fra en matrise henholdsvis. Vi benytter disse funksjonene for å få minimums- og maksimumverdiene for domenet.
Vi kan få minimumsverdien fra en matrise som vist:
d3.min (data, funksjon (d) return d.value;)
På samme måte, for å få maksimal verdi:
d3.max (data, funksjon (d) return d.value;)
Bare erstatt minimums- og maksimumverdiene i XScale domenet som vist:
xScale = d3.scale.linear () .område ([MARGINS.left, WIDTH - MARGINS.right]) .domæne ([d3.min (data, funksjon (d) retur d.år;), d3.max (data, funksjon (d) retur d.år;)]),
Tilsvarende, erstatte ySkala domene:
yScale = d3.scale.linear () .område ([HEIGHT - MARGINS.top, MARGINS.bottom]). domene ([d3.min (data, funksjon (d) return d.sale;), d3.max (data, funksjon (d) return d.sale;)]),
Lagre alle endringene og bla gjennom index.html. Nå bør du ha grafen som fungerer, som det var tidligere. Den eneste forskjellen er at den plukker opp domenet maksimum og minimum verdier dynamisk.
Å holde et enkelt JSON-objekt for prøven ville gjøre det lettere å analysere dataene og plotte det på diagrammet. Så kombiner de to stykkene av prøvedataene i en enkelt JSON datastreng som vist nedenfor:
var data = ["Klient": "ABC", "salg": "202", "år": "2000", "Klient": "ABC", "salg": "215" : "2002", "Klient": "ABC", "salg": "179", "år": "2004", "Klient": "ABC" år ":" 2006 ", " Klient ":" ABC "," salg ":" 134 "," år " , "år": "2010", "Klient": "XYZ", "salg": "100", "år": "2000", "Klient": "XYZ", "salg" 215 "," år ":" 2002 ", " Klient ":" XYZ "," salg ":" 179 "," år " : "199", "år": "2006", "Klient": "XYZ", "salg": "134" salg ":" 176 "," år ":" 2013 "];
Nå vil vi endre koden vår for å gjøre vår grafskala dynamisk i henhold til utvalgsdatasettet og dets verdier.
Neste deler vi og organiserer dataene basert på Klient slik at vi kan tegne en linjediagram for hver Klient i dataene. D3 gir en metode som kalles d3.nest som bidrar til å ordne data basert på en bestemt nøkkel felt. Vi skal bruke d3.nest å sortere ut dataene basert på Klient som vist:
var dataGroup = d3.nest () .key (funksjon (d) return d.Client;) .entries (data);
Her er hvordan dataGroup ville se:
["nøkkel": "ABC", "verdier": ["Klient": "ABC", "salg": "202", "år": "2000", "Klient": "ABC" "salg": "215", "år": "2002", "Klient": "ABC", "salg": "179", "år" "," salg ":" 199 "," år ":" 2006 ", " Klient ":" ABC "," salg ":" 134 "," år ":" 2008 ", " Klient " "ABC", "salg": "176", "år": "2010"], "nøkkel": "XYZ", "verdier": ["Klient": "XYZ", "salg" "100", "år": "2000", "Klient": "XYZ", "salg": "215", "år": "2002", "Klient": "XYZ" ":" 179 "," år ":" 2004 ", " Klient ":" XYZ "," salg ":" 199 "," år ":" 2006 ", " Klient ":" XYZ " "salg": "134", "år": "2008", "Klient": "XYZ", "salg": "176", "år": "2013"]]
Deretter fjerner du svg linje banekode for linjeskaping som vi hardkodede tidligere.
Accentsconagua
vis.append ('svg: path') .attr ('d', lineGen (data)) .attr ('slag', 'grønt') .attr ('slagbredde', 2) .attr , 'ingen'); vis.append ('svg: path') .attr ('d', lineGen (data2)) .attr ('slag', 'blå') .attr ('slagbredde', 2) .attr , 'ingen');I stedet skal vi iterere over dataGroup og opprett en linjediagram for hver Klient som vist:
dataGroup.forEach (funksjon (d, i) vis.append ('svg: path') .attr ('d', lineGen (d.values)) .attr ('stroke', 'blue') .attr strekkbredde ', 2) .attr (' fyll ',' ingen '););Lagre endringene og prøv å bla gjennom index.html. Du bør kunne se flerlinjediagrammet som vist:
La oss også legge til noen tilfeldige farger til graflinjene. For å legge til tilfeldige farger, bruker vi d3.hsl-metoden. Endre hjerneslag Attributt av linjediagrammet som vist nedenfor for å få tilfeldige farger for linjene.
dataGroup.forEach (funksjon (d, i) vis.append ('svg: path') .attr ('d', lineGen (d.values)) .attr ('slag', funksjon (d, j) "hsl (" + Math.random () * 360 + ", 100%, 50%)";) .attr ('slagbredde', 2) .attr ('fyll', 'ingen');) ;Lagre endringene og bla gjennom index.html. Du bør se tilfeldige farger for linjene på grafen.
Deretter legger vi til legender for klienter i utvalgsdataene. Når legender er lagt til, legger vi til et klikkhendelse på legender som ville bytte skjermen til de respektive linjediagrammer.
Først, for å legge til legenden, må vi endre margin bunn og margin topp til 50 for å imøtekomme legender.
var vis = d3.select ("# visualisering"), WIDTH = 1000, HEIGHT = 500, MARGINS = topp: 50, høyre: 20, bunn: 50, venstre: 50,Mens iterating the dataGroup, Vi legger til legender for de tilsvarende linjediagrammer. Legge til legender er ganske enkelt. Først definerer legenden plass basert på antall klienter eller linjediagrammer vi skal tegne:
lSpace = WIDTH / dataGroup.length;
Legg til en tekst til svg element med x og y koordinater mens iterating dataGroup etter linjens opprettelse som vist:
vis.append ("text") .attr ("x", (lSpace / 2) + i * lSpace) .attr ("y", HEIGHT) .stil ("fyll", "svart"). nøkkel);Vi har justert legendenavstanden (lSpace) Basert på antall legender vi må vise, slik at alle legender er like avstand fra hverandre. Vi har delt legenden med 2 slik at den er midtlinjert i sin plass og vil være slik den går fremover, som vi legger til (jeg * lSpace) til kommende legender.
Lagre alle endringene og prøv å bla gjennom index.html og du bør se legender under X-aksen.
La oss legge til litt styling på legender for å få dem til å se fet ut. Legg til følgende CSS til index.html:
.legenden font-size: 14px; font-weight: bold;
Legg til klassen legende til legenden opprettet.
vis.append ("text") .attr ("x", (lSpace / 2) + i * lSpace) .attr ("y", HEIGHT) .stil ("fyll", "svart") .attr "," legend ") .text (d.key);
Nå la vi legge til klikkhendelser på hver av legender som vises for å veksle skjermen til den tilsvarende linjen på flertallslinjen.
Først må vi legge til en id for hver linjediagram opprettet for å veksle skjermen.
.attr ('id', 'linje _' + d.key)Slik ser linjekodekoden ut:
vis.append ('svg: bane') .attr ('d', lineGen (d.values, xScale, yScale)) .attr ('slag', funksjon (d, j) return "hsl (" + Math. tilfeldig () * 360 + ", 100%, 50%)";) .attr ('slagbredde', 2) .attr ('id', 'linje_' + d.key) , 'ingen');Deretter legger du til i Legenden-opprettingsdelen klikk Egenskap:
.på ('klikk', funksjon () alarm (d.key);)Lagre endringen og bla gjennom index.html. Klikk på legender, og du bør se legenderens navn som varsler.
Deretter la vi legge til koden for å bytte linjevisningen. Vi trenger bare å sjekke gjeldende visningstilstand for linjediagrammet og bytte opaciteten for å vise og skjule linjen tilsvarende.
.på ('klikk', funksjon () var aktiv = d.aktiv? falsk: sant; var opacity = aktiv? 0: 1; d3.select ("# line_" + d.key). stil ("opacity" opacity); d.active = active;)Lagre endringene og prøv å bla gjennom index.html. Prøv å klikke på legender og displayet på den tilsvarende linjediagrammet skal bytte.
I denne opplæringen så vi hvordan vi kan gjøre vårt flertallskart dynamisk. Vi så også hvordan du lager D3.js-hendelser. For detaljerte opplysninger om forskjellige andre D3.js-metoder og APIer, ta en titt på den offisielle dokumentasjonen.
Kildekode fra denne opplæringen er tilgjengelig på GitHub.
Gi oss beskjed om dine tanker i kommentarene nedenfor!
