SVG Axes

API Reference ▸ SVG

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.

Axis

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…])

The number of major ticks on the axis. These will receive text labels.

# 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:

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.