Zeichnen des Diagramms
Wir werden jetzt die Logik zum Zeichnen des Diagramms hinzufügen. Definieren wir zunächst einige Konstanten innerhalb der Funktion drawChart() .
Hier fügen wir das SVG-Element sowie das Tooltip-Element hinzu:
Wir wählen das #container -Element aus und hängen ein SVG-Element und ein g -Element an, um andere SVG-Elemente zu gruppieren und zu übersetzen, wobei der linke und der obere Rand belassen werden. Wir fügen auch ein div -Element hinzu, das unser tooltipContent enthält.
Definieren wir als nächstes die Achsenskalen und den Linien-/Pfadgenerator:
d3.scaleLinear() ordnet eine beliebige Zahl innerhalb der angegebenen Domäne dem angegebenen Bereich zu. Diese Skalen helfen uns, die Positionen / Koordinaten in der Grafik für jedes Datenelement zu finden.
Zeichnen wir nun die Gitterlinien (Sie können dies überspringen, wenn Sie möchten), die X-Achse und die Y-Achse sowie die Datenlinie:
Zuerst fügen wir eine weitere Gruppe von SVG-Elementen hinzu, die die Gitterlinien entlang der Y-Achse enthalten. Wir setzen die tickFormat als leere Zeichenfolgen, da keine Beschriftungen mit ihnen gezeichnet werden sollen. Die Höhe dieser Gitterlinien wird gleich der Höhe des Diagramms festgelegt, aber wir fügen die — hinzu, sodass sie über der axisBottom und nicht darunter gezeichnet werden. In ähnlicher Weise zeichnen wir die Gitterlinien entlang der X-Achse.
Als nächstes zeichnen wir die tatsächlichen Achsen und hängen den Linienpfad an. Zu diesem Zeitpunkt haben Sie das Liniendiagramm bereits erstellt!
