vykreslení grafu
nyní přidáme logiku pro kreslení grafu. Definujme nejprve některé konstanty uvnitř funkce drawChart().
Tady jsme přidávání SVG prvek, stejně jako tooltip prvek:
vyberte #container prvek a přidat SVG uvnitř a g prvek do skupiny ostatní SVG prvky, a přeložit, takže na levé a horní rozpětí. Připojíme také prvek div, který bude obsahovat náš tooltipContent .
definujme stupnice OS a generátor řádků/cest dále:
d3.scaleLinear() mapuje libovolné číslo v dané doméně do daného rozsahu. Tyto váhy nám pomohou najít pozice / souřadnice v grafu pro každou datovou položku.
nyní nakreslíme mřížky (můžete to přeskočit, pokud chcete), osu X a osu Y a datovou čáru:
nejprve připojíme další skupinu prvků SVG, které budou obsahovat mřížky podél osy Y. Nastavili jsme tickFormat jako prázdné řetězce, protože nechceme, aby s nimi byly nakresleny žádné štítky. Výška těchto mřížek je nastavena na výšku grafu, ale přidáme — tak, aby byly nakresleny nad axisBottom a ne pod ním. Podobně nakreslíme mřížky podél osy X.
dále nakreslíme skutečné osy a připojíme cestu čáry. V tomto okamžiku jste již vytvořili řádkový graf!
