In D3, it’s worth remembering that a scale is a function that maps an input range to an output domain, whereas an axis is merely a visual representation of a scale. The axis component renders human-readable reference marks for scales. When creating a graph we have to make the line for x and y-axis, adding tick on the line and add the label text on the graph. All these activities are handled automatically by the axis generator in D3. We don’t have to build this tedious task from the scratch.
As we can see in above graph for making x-axis, the axis generator will create a line for x-axis through path function, axis generator will create one group where all the line or path, tick point, and text label are a group and all these are added to our SVG to display.
The D3 support four type of axis orientation.
- d3.axisTop: A horizontal axis with labels placed on the top of the axis.
- d3.axisBottom: A horizontal axis with labels placed on the bottom of the axis.
- d3.axisLeft: A Vertical axis with labels placed on the left-hand of the axis.
- d3.axisRight: A Vertical axis with labels placed on the right-hand of the axis.
Syntax:
var axis = d3.axisLeft(scale); Where scale is domain and range mapping variable.