-
Notifications
You must be signed in to change notification settings - Fork 0
SVG Axes
D3’s axis component displays reference lines for scales automatically. This lets you focus on displaying the data, while the axis component takes care of the tedious task of drawing axes and labeled ticks.
The axis component is designed to work with any of D3’s quantitative scales.
# d3.svg.axis()
# axis(selection)
The selection can also be a transition.
# axis.scale([scale])
# axis.orient([orientation])
Describes how to display the axis tick marks and numeric labels in relation to the axis line. Valid values are top, bottom, left and right. For a vertical axis, you should specify left or right and for a horizontal axis, you will want to specify top or bottom.
# axis.ticks([arguments…])
Sets the number of labeled major tick marks. The specified arguments are passed to the scale’s ticks method to compute the tick values. For quantitative scales, specify the desired tick count such as axis.ticks(20). For time scales, you can pass in a count or a function, such as axis.ticks(d3.time.minutes, 15).
The arguments are also passed to the scale’s tickFormat method to generate the default tick format. Thus, for log scales, you might specify both a count and a tick format function.
# axis.tickSubdivide([n])
The number of subdivisions to make in between major tick marks.
# axis.tickSize([major[[, minor], end]])
The length of the major, minor and ending tick marks. The end tick mark is the last one drawn in the scale and depending on spacing, it may end up quite close to the tick mark that precedes it. You can pass 0 to suppress displaying it. For example:
var yAxis = d3.svg.axis()
.scale(y)
.ticks(4)
.tickSize(6, 3, 0);This will give you major tick marks of size 6, minor of size 3 and no ending mark.
# axis.tickPadding([padding])
# axis.tickFormat([format])
A format can be passed to override the scale's default. For example, axis.tickFormat(d3.format(",.0f")) will display integers with comma-grouping for thousands. Note that for log scales, the tick format must be passed to the ticks method, instead.