Trazar el gráfico
Ahora agregaremos la lógica para dibujar el gráfico. Definamos primero algunas constantes dentro de la función drawChart().
Aquí estamos agregando el elemento SVG, así como el elemento tooltip:
Seleccionamos el elemento #container y agregamos un SVG dentro de él y un elemento g para agrupar otros elementos SVG, y traducirlo, dejando los márgenes izquierdo y superior. También añadimos un elemento div que contendrá nuestro tooltipContent .
Definamos las escalas de ejes y el generador de línea/ruta a continuación:
d3.scaleLinear() asigna cualquier número dado dentro del dominio dado al rango dado. Estas escalas nos ayudarán a encontrar las posiciones / coordenadas en el gráfico para cada elemento de datos.
Ahora dibujemos las líneas de cuadrícula (puede omitir esto si lo desea), el eje X y el eje Y, así como la línea de datos:
Primero, agregamos otro grupo de elementos SVG que contendrán las líneas de cuadrícula a lo largo del eje Y. Establecemos tickFormat como cadenas vacías porque no queremos que se dibujen etiquetas con ellas. La altura de estas líneas de cuadrícula se establece igual a la altura del gráfico, pero agregamos el — para que se dibujen por encima del axisBottom y no por debajo de él. Del mismo modo, dibujamos las líneas de cuadrícula a lo largo del eje X.
A continuación, dibujamos los ejes reales y añadimos el trazado de línea. ¡En este punto, ya ha creado el gráfico de líneas!
