Share
D3.js er et flott JavaScript-bibliotek som brukes til å lage interaktiv og visuelt tiltalende grafikk. D3.js står for datadrevne dokumenter og bruksområder HTML, SVG og CSS å drive sin magi. Fra de offisielle dokumentene,
D3.js er et JavaScript-bibliotek for å manipulere dokumenter basert på data. D3 hjelper deg med å bringe data til liv ved hjelp av HTML, SVG og CSS. D3 vekt på webstandarder gir deg de fulle evnene til moderne nettlesere uten å knytte deg til et proprietært rammeverk, kombinere kraftige visualiseringskomponenter og en datastyrt tilnærming til DOM-manipulering.
Denne opplæringen vil være en innledende veiledning på D3.js der vi fokuserer på noen grunnleggende ting for å lage en dynamisk graf. I løpet av denne opplæringen ser vi hvordan du lager et flertallskart ved hjelp av D3.js-biblioteket.
Hvis du er på utkikk etter en rask løsning, er det et utvalg av JavaScript-diagrammer over på Envato Market.
Fra bare noen få dollar er det en fin måte å implementere noe på noen få minutter, som ville ta mye lengre tid å bygge fra grunnen av!
Du kan finne skript for å lage alt fra enkle linjediagrammer til komplekse infographics.
JavaScript-kartelementer på Envato MarketFor å komme i gang med å jobbe med D3.js, last ned og ta med D3.js, eller du kan direkte koble til den nyeste versjonen av D3.js.
Vi starter med å lage X- og Y-aksene for diagrammet vårt. Vi bruker noen eksempeldata for å plotte diagrammet.
Her er den grunnleggende bare-bein HMTL-koden til index.html:
For å komme i gang, trenger vi noen eksempler på data. Her er våre eksempeldata:
var data = ["salg": "202", "år": "2000", "salg": "215", "år": "2001", år ":" 2002 "," salg ":" 199 "," år ":" 2003 ", " salg ":" 134 "," år ":" 2003 ", 176 "," år ":" 2010 "];
Scalable Vector Graphics (SVG) er et XML-basert bildeformat for tegning av 2D-grafikk som har støtte for interaktivitet og animasjon. Vi bruker en svg element for å tegne grafen vår. Legg til svg element i index.html:
La oss da definere noen konstanter som bredde, høyde, venstre marg, etc., som vi skal bruke mens du lager grafen. D3 gir en metode som kalles d3.select for å velge et element. Vi bruker d3.select for å velge svg element fra index.html.
Accentsconagua
var vis = d3.select ("# visualisering"), WIDTH = 1000, HEIGHT = 500, MARGINS = topp: 20, høyre: 20, bunn: 20, venstre: 50,Basert på dataene må vi lage skalaer for X- og Y-aksene. Vi krever maksimum og minimum verdi av tilgjengelige data for å skape skalaene på aksene. D3 gir en API-metode kalt d3.scale.linear som vi skal bruke for å skape skalaer for aksene.
d3.scale.linear bruker to egenskaper kalt område og domene å skape skalaen. Område definerer området tilgjengelig for å gjengi grafen, og Domene definerer maksimale og minsteverdier vi må plotte i ledig plass.
xScale = d3.scale.linear () .område ([MARGINS.left, WIDTH - MARGINS.right]). domene ([2000,2010]),
Område har blitt spesifisert i koden ovenfor, slik at den ikke blir overfylt rundt kantene. Maksimum og minimumsverdier for domenet er satt ut basert på de prøvede dataene som brukes.
På samme måte definerer du ySkala som vist:
yScale = d3.scale.linear () .område ([HEIGHT - MARGINS.top, MARGINS.bottom]). domene ([134,215]),
Deretter la oss lage aksene ved hjelp av skalaene som er definert i den ovennevnte koden. D3 Gir en API-metode kalt d3.svg.axis for å opprette akser.
xAxis = d3.svg.axis () .scale (xScale), yAxis = d3.svg.axis () .scale (yScale);
Deretter legger du til den opprettede X-aksen til svg beholder som vist:
vis.append ("svg: g") .call (xAxis); Lagre endringene og prøv å bla gjennom index.html. Du burde ha noe som:
Som du kan se, er X-aksen tegnet, men det har noen problemer. Først må vi posisjonere den vertikalt nedover. Mens X-aksen legges til SVG-beholderen, kan vi bruke transformasjonsegenskapen til å flytte aksen nedover. Vi skal bruke oversette transformasjon å flytte aksen basert på koordinater. Siden vi bare trenger å flytte X-aksen nedover, gir vi transformasjonskoordinatene for X-aksen som 0 og Y-aksen like over marginen.
vis.append ("svg: g") .attr ("transform", "translate (0," + (HEIGHT - MARGINS.bottom) + ")") .call (xAxis);La oss nå legge til Y-aksen. Legg til følgende kode for å legge til Y-aksen til SVG-beholderen:
vis.append ("svg: g") .call (yAxis);Lagre endringene og bla gjennom index.html og du bør ha begge aksene som vist.
Som du kan se i skjermbildet ovenfor, er det Y-aksen er ikke i riktig posisjon. Så, vi må endre orientering av den ovenfor viste Y-aksen til venstre. Når aksen er justert til venstre side, bruker vi D3-transformasjonen til å plassere den riktig ved siden av X-aksen. Legg til orient eiendom til yAkse for å endre retningen.
yAxis = d3.svg.axis () .scale (yScale) .orient ("left");Påfør D3 forvandle mens du prøver å legge til Y-aksen til SVG-beholderen:
vis.append ("svg: g") .attr ("transform", "translate (" + (MARGINS.left) + ", 0)") .call (yAxis);Vi har holdt y-koordinaten for oversette som 0, siden vi bare ønsket å flytte den horisontalt. Lagre endringene og bla gjennom index.html. Du bør se noe som:
For å plotte prøvedataene i diagrammet, må vi søke på XScale og ySkala til koordinatene for å transformere dem og å tegne en linje over plottingsområdet. D3 gir en API-metode som kalles d3.svg.line () å tegne en linje. Så legg til følgende kode:
var lineGen = d3.svg.line () .x (funksjon (d) return xScale (d.year);) .y (funksjon (d) return yScale (d.sale););
Som du kan se i koden ovenfor, har vi angitt x og y koordinater for linjen som per XScale og ySkala definert tidligere.
Deretter legger vi til en linjebane til svg og kart eksempeldataene til plottingsområdet ved hjelp av lineGen funksjon. Vi vil også spesifisere noen attributter for linjen, for eksempel hjerneslag farge, slag-bredde, etc., som vist nedenfor:
vis.append ('svg: path') .attr ('d', lineGen (data)) .attr ('slag', 'grønt') .attr ('slagbredde', 2) .attr , 'ingen');Lagre endringene og bla gjennom index.html. Du bør ha linjediagrammet som vist:
Som standard vil linjen ha Lineær interpolering. Vi kan spesifisere interpolasjonen samt legge til noen CSS på aksene for å gjøre det bedre.
var lineGen = d3.svg.line () .x (funksjon (d) return xScale (d.year);) .y (funksjon (d) return yScale (d.sale);) .interpolate basis");
Legg til følgende CSS til index.html:
.aksebane fill: none; slag: # 777; form-gjengivelse: crispEdges; .axis tekst font-family: Lato; skriftstørrelse: 13px;
Ta med klassen til begge deler x-akse og yAkse:
vis.append ("svg: g") .attr ("klasse", "akse") .attr ("transform", "oversette (0," + (HEIGHT - MARGINS.bottom) + ")"). x-akse); vis.append ("svg: g") .attr ("klasse", "akse") .attr ("transform", "translate (" + (MARGINS.left) + ", 0)") .call (yAxis) ;Med basis interpolering og noen CSS, her er hvordan det skal se ut:
Vurder et annet utvalgsdatasett som vist:
var data2 = ["salg": "152", "år": "2000", "salg": "189", "år": "2002", år ":" 2004 "," salg ":" 199 "," år ":" 2006 ", " salg ":" 134 "," år ":" 2008 ", 176 "," år ":" 2010 "];
For enkelhets skyld har vi vurdert to forskjellige prøve datasett med det samme X-akse verdier. For å plotte ovenstående vist data2 sammen data, vi trenger bare å legge til en annen svg sti til svg element. Den eneste forskjellen er at dataene passerer for å skalere til lineGen funksjonen er data2. Slik ser det ut:
vis.append ('svg: path') .attr ('d', lineGen (data2)) .attr ('slag', 'blå') .attr ('slagbredde', 2) .attr , 'ingen');Lagre endringene og bla gjennom index.html. Du bør kunne se flerlinjediagrammet som vist:
I denne veiledningen så vi hvordan du kommer i gang med å lage et enkelt flertallskart ved hjelp av D3.js. I neste del av denne serien tar vi denne opplæringen til neste nivå ved å gjøre det dynamiske i flerlinjediagrammet, og vi vil også legge til noen funksjoner for å gjøre grafen mer interaktiv.
Kildekode fra denne opplæringen er tilgjengelig på GitHub.
Gi oss beskjed om dine tanker i kommentarene nedenfor!
