plotten van de grafiek
we voegen nu de logica toe om de grafiek te tekenen. Laten we eerst enkele constanten definiëren binnen de drawChart() functie.
hier voegen we zowel het SVG-element als het tooltip-element toe:
we selecteren het #container – element en voegen er een SVG in toe en een g – element om andere SVG-elementen te groeperen, en vertalen het, waarbij de linker-en bovenste marges worden gelaten. We voegen ook een div element toe dat ons tooltipContent zal bevatten .
laten we de asschalen definiëren en de lijn/padgenerator volgende:
d3.scaleLinear() wijst elk gegeven getal binnen het gegeven domein toe aan het gegeven bereik. Deze schalen zullen ons helpen de posities/coördinaten op de grafiek te vinden voor elk gegevensitem.
laten we nu de rasterlijnen tekenen (u kunt dit overslaan als u wilt), de X-as, en de Y-as evenals de gegevenslijn:
eerst voegen we een andere groep SVG-elementen toe die de rasterlijnen langs de Y-as zullen bevatten. We stellen de tickFormat in als lege tekenreeksen omdat we niet willen dat er labels mee getekend worden. De hoogte van deze rasterlijnen is gelijk aan de hoogte van de grafiek, maar we voegen de — toe zodat ze boven de axisBottom worden getekend en niet eronder. Op dezelfde manier tekenen we de rasterlijnen langs de X-as.
vervolgens tekenen we de werkelijke assen en voegen we het lijnpad toe. Op dit punt hebt u de lijndiagram al gemaakt!
