plotando o gráfico
vamos agora adicionar a lógica para desenhar o gráfico. Vamos definir algumas constantes primeiro dentro da função drawChart().
aqui estamos adicionando o elemento SVG, bem como o elemento tooltip:
selecionamos o elemento #container e adicionamos um elemento SVG dentro dele e um g para agrupar outros elementos SVG, e traduzi-lo, deixando as margens esquerda e superior. Nós também adicionamos um elemento div que conterá o nosso tooltipContent .
vamos definir as escalas dos eixos e o gerador de linha/caminho seguinte:
d3.scaleLinear() mapeia qualquer número dado dentro do domínio dado para o intervalo dado. Estas escalas nos ajudarão a encontrar as posições/coordenadas no gráfico para cada item de dados.
agora vamos desenhar as gridlines (você pode ignorar isso se quiser), o eixo X, e o eixo Y, bem como a linha de dados:
primeiro, adicionamos outro grupo de elementos SVG que irão conter as gridlines ao longo do eixo Y. Nós definimos o tickFormat como cordas vazias porque não queremos nenhuma etiqueta desenhada com elas. A altura destas gridlines é igual à altura da carta, mas adicionamos o — para que sejam desenhados acima do axisBottom e não abaixo dele. Da mesma forma, desenhamos as grelhas ao longo do eixo X.A seguir, desenhamos os eixos reais, bem como adicionamos o caminho da linha. Neste ponto, você já criou o gráfico de linhas!
