Tracer le graphique
Nous allons maintenant ajouter la logique pour dessiner le graphique. Définissons d’abord quelques constantes à l’intérieur de la fonction drawChart().
Ici, nous ajoutons l’élément SVG ainsi que l’élément d’info-bulle:
Nous sélectionnons l’élément #container et y ajoutons un élément SVG et un élément g pour regrouper d’autres éléments SVG, et le traduire, en laissant les marges de gauche et du haut. Nous ajoutons également un élément div qui contiendra notre tooltipContent.
Définissons les échelles d’axes et le générateur de ligne/chemin suivant:
d3.scaleLinear() mappe n’importe quel nombre donné dans le domaine donné à la plage donnée. Ces échelles nous aideront à trouver les positions / coordonnées sur le graphique pour chaque élément de données.
Dessinons maintenant les lignes de grille (vous pouvez ignorer cela si vous le souhaitez), l’axe des abscisses et l’axe des ordonnées ainsi que la ligne de données:
Tout d’abord, nous ajoutons un autre groupe d’éléments SVG qui contiendra les lignes de grille le long de l’axe des ordonnées. Nous définissons les tickFormat comme des chaînes vides car nous ne voulons pas d’étiquettes dessinées avec elles. La hauteur de ces lignes de quadrillage est définie égale à la hauteur du graphique, mais nous ajoutons le — pour qu’ils soient dessinés au-dessus du axisBottom et non en dessous. De même, nous dessinons les lignes de grille le long de l’axe des abscisses.
Ensuite, nous dessinons les axes réels et ajoutons le chemin de la ligne. À ce stade, vous avez déjà créé le graphique en courbes!
