Let’s add horizontal and vertical axes, so we can do away with the horrible red numbers cluttering up our chart.
Much like its scales, D3’s axes are actually functions whose parameters you define. Unlike scales, when an axis function is called, it doesn’t return a value, but generates the visual elements of the axis, including lines, labels, and ticks.
Note that the axis functions are SVG-specific, as they generate SVG elements. Also, axes are intended for use with quantitative scales (that is, scales that use numeric values, as opposed to ordinal, categorical ones).
There are four different axis function constructors, each one corresponding to a different orientation and placement of labels:
d3.axisRight. For vertical axes, use
d3.axisRight, with ticks and labels appearing to the left and right, respectively. For horizontal axes, use
d3.axisBottom, with ticks and labels appearing above and below, respectively.
We’ll start by using
d3.axisBottom() to create a generic axis function:
At a minimum, each axis also needs to be told on ...