rysowanie wykresu
będziemy teraz dodawać logikę do rysowania wykresu. Zdefiniujmy najpierw niektóre stałe wewnątrz funkcji drawChart().
tutaj dodajemy element SVG oraz Podpowiedź:
wybieramy element #container i dołączamy do niego element SVG oraz element g do grupowania innych elementów SVG i tłumaczymy go, pozostawiając lewy i górny margines. Dołączamy również element div, który będzie zawierał nasz tooltipContent .
zdefiniujmy skale osi i generator linii/ścieżki dalej:
d3.scaleLinear() mapuje dowolną liczbę w danej domenie do danego zakresu. Skale te pomogą nam znaleźć pozycje / współrzędne na wykresie dla każdej pozycji danych.
teraz narysujmy linie siatki (możesz to pominąć, jeśli chcesz), oś X i oś Y, a także linię danych:
najpierw dołączamy kolejną grupę elementów SVG, które będą zawierały linie siatki wzdłuż osi Y. Ustawiamy tickFormat jako puste ciągi znaków, ponieważ nie chcemy, aby były nimi rysowane żadne etykiety. Wysokość tych linii siatki jest równa wysokości wykresu, ale dodajemy — tak, że są one rysowane powyżej axisBottom, a nie poniżej niego. Podobnie rysujemy linie siatki wzdłuż osi X.
następnie rysujemy rzeczywiste osie, a także dołączamy ścieżkę linii. W tym momencie masz już utworzony wykres liniowy!
