trasarea diagramei
acum vom adăuga logica pentru a desena diagrama. Să definim mai întâi câteva constante în interiorul funcției drawChart().
aici adăugăm elementul SVG, precum și elementul tooltip:
selectăm elementul #container și adăugăm un SVG în interiorul acestuia și un element g pentru a grupa alte elemente SVG și traduceți-l, lăsând marginile din stânga și din partea de sus. De asemenea, adăugăm un element div care va conține tooltipContent .
să definim axele Scale și generatorul de linie/cale următoare:
d3.scaleLinear() mapează orice număr dat din domeniul dat în intervalul dat. Aceste scale ne vor ajuta să găsim pozițiile / coordonatele pe grafic pentru fiecare element de date.
acum să desenăm liniile de grilă (puteți sări peste acest lucru dacă doriți), axa X și axa Y, precum și linia de date:
mai întâi, adăugăm un alt grup de elemente SVG care vor conține liniile de grilă de-a lungul axei Y. Setăm tickFormat ca șiruri goale, deoarece nu vrem să fie desenate etichete cu ele. Înălțimea acestor linii de grilă este setată egală cu înălțimea graficului, dar adăugăm — astfel încât acestea să fie desenate deasupra axisBottom și nu sub ea. În mod similar, tragem liniile de grilă de-a lungul axei X.
apoi, tragem axele reale, precum și adăugăm calea liniei. În acest moment, ați creat deja graficul de linie!
