Axis

API Reference

A thin wrapper on top of D3’s d3.svg.axis component that automatically updates whenever the associated context changes. To create an axis, first create a context. For example:

var context = cubism.context(), // a default context
    axis = context.axis(); // a default axis

# axis(selection)

Apply the axis to a D3 selection or transition containing one or more SVG element. For example:

d3.select("body").append("svg")
    .attr("class", "axis")
    .attr("width", 1440)
    .attr("height", 30)
  .append("g")
    .attr("transform", "translate(0,30)")
    .call(axis);

# axis.orient([orientation])

Get or set the axis orientation. If orientation is specified, sets the axis orientation and returns the axis. If orientation is not specified, returns the current orientation, which defaults to "bottom". Valid values are "top", "bottom", "left" and "right". For a vertical axis, specify "left" or "right"; for a horizontal axis, specify "top" or "bottom".

# axis.ticks([arguments…])

Control how ticks are generated for the axis. 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).

# axis.tickSubdivide([count])

Optionally subdivide ticks uniformly. If count is specified, sets the number of subdivisions to make between major tick marks and returns the axis. If count is not specified, returns the current subdivision count which defaults to zero.

# axis.tickSize([major[‍[, minor], end]‍])

Get or set the size of major, minor and end ticks. The end ticks are determined by the associated scale's domain extent, and are part of the generated path domain rather than a tick line. Note that the end ticks may be close or even overlapping with the first or last tick. An end tick size of 0 suppresses end ticks. For example:

axis.tickSize(6); // sets the major, minor and end to 6 
axis.tickSize(6, 0); // sets major and minor to 6, end to 0
axis.tickSize(6, 3, 0); // sets major to 6, minor to 3, and end to 0

# axis.tickPadding([padding])

Set or get the padding between ticks and tick labels. If padding is specified, sets the padding to the specified value in pixels and returns the axis. If padding is not specified, returns the current padding which defaults to 3 pixels.

# axis.tickFormat([format])

Set or get the tick value formatter for labels. If format is specified, sets the format to the specified function and returns the axis. If format is not specified, returns the current format function, which defaults to null. A null format indicates that the scale's default formatter should be used, which is generated by calling scale.tickFormat. In this case, the arguments specified by ticks are likewise passed to scale.tickFormat.

Note: for log scales, the number of ticks cannot be customized. However, the number of tick labels can be customized via log.tickFormat. Thus, to reduce the number of displayed tick labels when using a log scale, use axis.ticks to set the arguments that are passed to scale.tickFormat. For example:

axis.ticks(20, function(d) { return "$" + d.toFixed(2); });