Plotte Diagrammet
Vi vil nå legge til logikken for å tegne diagrammet. La oss definere noen konstanter først inne i funksjonen drawChart().
her legger VI TIL SVG-elementet samt tooltip-elementet:
vi velger #container – elementet og legger TIL EN SVG i den og et g – element for å gruppere ANDRE SVG-elementer, og oversetter det, forlater venstre og toppmarginer. Vi legger også til et div element som vil inneholde vår tooltipContent.
la oss definere akseskalaene og linje – /banegeneratoren neste:
d3.scaleLinear() kartlegger et gitt nummer innenfor det gitte domenet til det gitte området. Disse skalaene vil hjelpe oss med å finne posisjonene/koordinatene på grafen for hvert dataelement.
la Oss nå tegne rutenettene (du kan hoppe over dette hvis du vil), X-aksen Og Y-aksen samt datalinjen:
Først legger vi til en annen gruppe SVG-elementer som vil inneholde rutenettene langs Y-aksen. Vi setter tickFormat som tomme strenger fordi vi ikke vil ha noen etiketter tegnet med dem. Høyden på disse rutenettene er satt lik høyden på diagrammet, men vi legger til — slik at de trekkes over axisBottom og ikke under den. På samme måte tegner vi rutenettene langs X-aksen.
deretter tegner vi de faktiske aksene samt legger til linjebanen. På dette punktet har du allerede opprettet linjediagrammet!
