a diagram ábrázolása
most hozzáadjuk a logikát a diagram rajzolásához. Először határozzunk meg néhány állandót a drawChart() függvényen belül.
itt adjuk hozzá az SVG elemet, valamint az eszköztipp elemet:
kiválasztjuk a #container elemet, és hozzáfűzünk egy SVG-t és egy g elemet a többi SVG elem csoportosításához, és lefordítjuk, hagyva a bal és a felső margót. Hozzáteszünk egy div elemet is, amely tartalmazza a tooltipContent elemet .
határozzuk meg a tengely skálákat és a vonal/út generátort következő:
d3.scaleLinear() leképezi az adott tartományon belüli bármely számot az adott tartományra. Ezek a skálák segítenek megtalálni az egyes adatelemek pozícióit / koordinátáit a grafikonon.
most rajzoljuk meg a rácsvonalakat (ezt kihagyhatja, ha akarja), az X tengelyt és az Y tengelyt, valamint az adatvonalat:
először egy másik SVG elemcsoportot fűzünk hozzá, amely az Y tengely mentén tartalmazza a rácsvonalakat. A tickFormat – et üres karakterláncként állítjuk be, mert nem szeretnénk, hogy címkéket rajzoljunk velük. Ezeknek a rácsvonalaknak a magassága megegyezik a diagram magasságával, de hozzáadjuk a — értéket úgy, hogy azok a axisBottom fölé kerüljenek, nem pedig alatta. Hasonlóképpen rajzoljuk a rácsvonalakat az X tengely mentén.
ezután rajzoljuk meg a tényleges tengelyeket, valamint csatoljuk a vonal útját. Ezen a ponton már létrehozta a vonaldiagramot!
