d3-x3dom-axis

x3dom version of d3-axis. Create 3d axes in x3dom along x, y and z directions.

Installing

If you use NPM, npm install d3-x3dom-axis. Otherwise, download the latest release.

Demo

Demo on blockbuilder

API Reference

Regardless of orientation, axes are always rendered so as to cover the domain of the scale on the axis of concern. To change the position of the axis with respect to the chart, put it the containing element in a transform node.

# d3.x3domAxis(direction, tickDirection, scale)

Constructs a new axis generator for the given scale, with empty tick arguments, a tick size of 1 and padding of 1. Tick labelsare drawn as user facing billboard.

# axis(context)

Render the axis to the given context, which should be a selection of an x3dom container node (either transform or group node).

# axis.scale([scale])

If scale is specified, sets the scale and returns the axis. If scale is not specified, returns the current scale.

# axis.ticks(arguments…)

A convenience function for setting the tick arguments. For example, this:

axis.ticks(10);

Is equivalent to:

axis.tickArguments([10]);

# axis.tickArguments([arguments])

If arguments are specified, stores the specified arguments for subsequent use in generating ticks and returns the axis. The arguments will later be passed to scale.ticks to generate tick values (unless tick values are specified explicitly via axis.tickValues). These arguments are also passed to the scale’s tickFormat method to generate a tick format (unless a tick format is specified explicitly via axis.tickFormat). If no arguments are specified, returns the current tick arguments, which defaults to the empty array.

Suitable arguments depends on the associated scale: for a quantitative scale, you might specify a suggested tick count such as [20] or a tick count and a tick format specifier such as [10, "$,.2f"]; for a time scale, a time interval such as [d3.timeMinute, 15] might be appropriate.

# axis.tickValues([values])

If a values array is specified, the specified values are used for ticks rather than using the scale’s automatic tick generator. If values is null, clears any previously-set explicit tick values and reverts back to the scale’s tick generator. If values is not specified, returns the current tick values, which defaults to null. For example, to generate ticks at specific values:

var xAxis = d3.axisBottom(x)
    .tickValues([1, 2, 3, 5, 8, 13, 21]);

The explicit tick values take precedent over the tick arguments set by axis.tickArguments. However, any tick arguments will still be passed to the scale’s tickFormat function if a tick format is not also set.

# axis.tickFormat([format])

If format is specified, sets the tick format 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 axis.tickArguments are likewise passed to scale.tickFormat.

See d3-format and d3-time-format for help creating formatters. For example, to display integers with comma-grouping for thousands:

axis.tickFormat(d3.format(",.0f"));

# axis.tickSize([size])

If size is specified, sets the inner and outer tick size to the specified value and returns the axis. If size is not specified, returns the current inner tick size, which defaults to 6.

# axis.tickPadding([padding])

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 1 pixels. It corresponds to the distance at which the label is drawm from the axis in the opposite direction of the tickDirection.