plotta diagrammet
vi kommer nu att lägga till logiken för att rita diagrammet. Låt oss definiera några konstanter först inuti funktionen drawChart().
här lägger vi till SVG-elementet såväl som verktygstipselementet:
vi väljer #container – elementet och lägger till en SVG inuti den och ett g – element för att gruppera andra SVG-element och översätta det och lämna vänster och övre marginaler. Vi lägger också till ett div – element som kommer att innehålla vår tooltipContent .
låt oss definiera axelskalorna och linje – /bangeneratorn nästa:
d3.scaleLinear() kartlägger ett visst nummer inom den givna domänen till det angivna intervallet. Dessa skalor hjälper oss att hitta positionerna/koordinaterna i diagrammet för varje dataobjekt.
låt oss nu rita rutnäten (du kan hoppa över detta om du vill), X-axeln och Y-axeln samt datalinjen:
först lägger vi till en annan grupp SVG-element som innehåller rutnäten längs Y-axeln. Vi ställer in tickFormat som tomma strängar eftersom vi inte vill ha några etiketter ritade med dem. Höjden på dessa gridlines är lika med höjden på diagrammet, men vi lägger till — så att de dras över axisBottom och inte under den. På samma sätt ritar vi rutnätet längs X-axeln.
därefter ritar vi de faktiska axlarna och lägger till linjevägen. Vid denna tidpunkt har du redan skapat linjediagrammet!
