kaaviota
piirretään nyt logiikkaa kaavion piirtämiseksi. Määritellään ensin joitakin vakioita drawChart() funktion sisällä.
tässä lisäämme SVG-elementin sekä työkaluvihjeen elementin:
valitsemme #container elementin ja liitämme SVG: n sen sisään ja g elementin ryhmittelemään muita SVG-elementtejä ja käännämme sen jättäen jäljelle vasemman ja ylimmän marginaalin. Lisäämme myös div elementin, joka sisältää meidän tooltipContent .
määritellään akseliasteikot ja viiva/polkugeneraattori seuraavaksi:
d3.scaleLinear() kartoittaa minkä tahansa tietyn alueen numeron annetulle alueelle. Nämä vaa ’ at auttavat meitä löytämään kunkin tietokohteen kaavion sijainnit/koordinaatit.
piirretään nyt ristiviivat (voit ohittaa tämän jos haluat), X-akseli ja Y-akseli sekä datarivi:
ensin liitetään toinen SVG-elementtien ryhmä, joka sisältää Y-akselin suuntaiset ruudut. Asetimme tickFormat: n tyhjiksi merkkijonoiksi, koska emme halua, että niillä piirretään etikettejä. Näiden ruudukkojen korkeudeksi on asetettu kaavion korkeus, mutta lisäämme — niin, että ne piirretään axisBottom yläpuolelle eikä sen alle. Samoin piirrämme ruudukot X-akselin suuntaisesti.
seuraavaksi piirretään varsinaiset akselit sekä liitetään viivapolku. Tässä vaiheessa olet jo luonut viivakaavion!
