plotte diagrammet
vi vil nu tilføje logikken til at tegne diagrammet. Lad os definere nogle konstanter først inde i drawChart() – funktionen.
her tilføjer vi SVG-elementet såvel som værktøjstipelementet:
vi vælger #container elementet og tilføjer en SVG inde i det og et g element for at gruppere andre SVG-elementer og oversætte det, forlader venstre og øverste margener. Vi tilføjer også et div element, som vil indeholde vores tooltipContent.
lad os definere akserne skalaer og linjen/sti generator næste:
d3.scaleLinear() kortlægger et givet nummer inden for det givne domæne til det givne interval. Disse skalaer hjælper os med at finde positionerne/koordinaterne på grafen for hvert dataelement.
lad os nu tegne gitterlinjerne (du kan springe over dette, hvis du vil), H-aksen og Y-aksen samt datalinjen:
først tilføjer vi en anden gruppe SVG-elementer, der vil indeholde gitterlinjerne langs Y-aksen. Vi indstiller tickFormat som tomme strenge, fordi vi ikke vil have nogen etiketter tegnet med dem. Højden på disse gitterlinjer er indstillet lig med diagrammets højde, men vi tilføjer —, så de trækkes over axisBottom og ikke under den. På samme måde tegner vi gitterlinjerne langs h-aksen.
dernæst tegner vi de faktiske akser samt tilføjer linjestien. På dette tidspunkt har du allerede oprettet linjediagrammet!
