Tracciare il grafico
Ora aggiungeremo la logica per disegnare il grafico. Definiamo prima alcune costanti all’interno della funzione drawChart().
Qui stiamo aggiungendo l’elemento SVG e l’elemento tooltip:
Selezioniamo l’elemento #container e aggiungiamo un SVG al suo interno e un elemento g per raggruppare altri elementi SVG e tradurlo, lasciando i margini sinistro e superiore. Aggiungiamo anche un elemento div che conterrà il nostro tooltipContent.
Definiamo le scale degli assi e il generatore di linea/percorso successivo:
d3.scaleLinear() mappa qualsiasi numero dato all’interno del dominio dato all’intervallo dato. Queste scale ci aiuteranno a trovare le posizioni / coordinate sul grafico per ogni elemento di dati.
Ora disegniamo le linee della griglia (puoi saltare questa se vuoi), l’asse X e l’asse Y così come la linea dati:
Per prima cosa, aggiungiamo un altro gruppo di elementi SVG che conterrà le linee della griglia lungo l’asse Y. Impostiamo tickFormat come stringhe vuote perché non vogliamo etichette disegnate con loro. L’altezza di queste griglie è impostata uguale all’altezza del grafico, ma aggiungiamo — in modo che siano disegnate sopra axisBottom e non sotto di esso. Allo stesso modo, disegniamo le griglie lungo l’asse X.
Successivamente, disegniamo gli assi effettivi e aggiungiamo il percorso della linea. A questo punto, hai già creato il grafico a linee!
