Here we add x and y axes using the d3.svg.axis objects. We labelled both xAxis
and yAxis
as class axis
so the CSS code above can specify that the axis geometry is not filled. We have also changed the x scale to ordinal.
We have also used SVG grouping nodes. Here's an example of how they work:
<svg>
<g transform="translate(10,20)">
<rect x="30" y="40"></rect>
</g>
</svg>
These grouping nodes can transform the SVG geometry inside of them. So the rectangle above would actually be positioned at x=40, y=60.