axisTop constructor
axisTop(scale) constructs a new top-oriented axis generator for the given scale, with empty tick arguments, a tick size of 6 and padding of 3. In this orientation, ticks are drawn above the horizontal domain path.
d3-axis
25 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
axisBottom constructor
axisBottom(scale) constructs a new bottom-oriented axis generator for the given scale, with empty tick arguments, a tick size of 6 and padding of 3. In this orientation, ticks are drawn below the horizontal domain path.
axisLeft constructor
axisLeft(scale) constructs a new left-oriented axis generator for the given scale, with empty tick arguments, a tick size of 6 and padding of 3. In this orientation, ticks are drawn to the left of the vertical domain path.
axis(context) rendering
axis(context) renders the axis to the given context, which may be either a selection of SVG containers (either SVG or G elements) or a corresponding transition.
axis.scale() getter/setter
axis.scale(scale) sets the scale and returns the axis. If scale is not specified, returns the current scale.
axis.ticks() method
axis.ticks(...arguments) sets the arguments that will be passed to scale.ticks and scale.tickFormat when the axis is rendered, and returns the axis generator. The meaning of the arguments depends on the axis' scale type: most commonly, the arguments are a suggested count for the number of ticks (or a time interval for time scales), and an optional format specifier. This method is a convenience function for axis.tickArguments. This method has no effect if the scale does not implement scale.ticks, as with band and point scales.
axis.tickArguments() method
axis.tickArguments(arguments) sets the arguments that will be passed to scale.ticks and scale.tickFormat when the axis is rendered, and returns the axis generator. If arguments is not specified, returns the current tick arguments, which defaults to the empty array. This method has no effect if the scale does not implement scale.ticks, as with band and point scales.
axis.tickValues() method
axis.tickValues(values) sets the specified values to be used for ticks rather than the scale's automatic tick generator. The explicit tick values take precedence over the tick arguments set by axis.tickArguments. 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.
axis.tickFormat() method
axis.tickFormat(format) 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. In that case, the arguments specified by axis.tickArguments are likewise passed to scale.tickFormat.
axis.tickSizeInner() method
axis.tickSizeInner(size) sets the inner 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. The inner tick size controls the length of the tick lines, offset from the native position of the axis.
axis.tickSizeOuter() method
axis.tickSizeOuter(size) sets the outer tick size to the specified value and returns the axis. If size is not specified, returns the current outer tick size, which defaults to 6. The outer tick size controls the length of the square ends of the domain path, offset from the native position of the axis. An outer tick size of 0 suppresses the square ends of the domain path, instead producing a straight line.
axis.tickPadding() method
axis.tickPadding(padding) 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.offset() method
axis.offset(offset) sets the pixel offset to the specified value in pixels and returns the axis. If offset is not specified, returns the current pixel offset. The pixel offset defaults to 0 on devices with a devicePixelRatio greater than 1, and 0.5 otherwise. This default pixel offset ensures crisp edges on low-resolution devices.
Axis SVG structure
An axis consists of a path element of class "domain" representing the extent of the scale's domain, followed by transformed g elements of class "tick" representing each of the scale's ticks. Each tick has a line element to draw the tick line, and a text element for the tick label.
Axis orientation is fixed
The orientation of an axis is fixed; to change the orientation, remove the old axis and create a new axis.
Axis positioning example
To position an axis with respect to a chart, specify a transform attribute on the containing element. Example: svg.append("g").attr("transform", `translate(0,${height - marginBottom})`).call(d3.axisBottom(x));
Axis updating with transition
If the scale has changed, call the axis component a second time to update. For smooth animations, call it on a transition. Example: gx.transition().duration(750).call(d3.axisBottom(x));
Tick arguments for linear scale example
To generate twenty ticks with SI-prefix formatting on a linear scale, call: axis.ticks(20, "s");
Tick arguments for time scale example
To generate ticks every fifteen minutes with a time scale, call: axis.ticks(d3.timeMinute.every(15));
Explicit tick values example
To generate ticks at specific values: const axis = d3.axisBottom(x).tickValues([1, 2, 3, 5, 8, 13, 21]);
Tick format with number formatting example
To display integers with comma-grouping for thousands, call: axis.tickFormat(d3.format(",. 0f"));
d3-axis module overview
d3-axis provides human-readable reference marks for scales. It includes four axis generators (axisTop, axisRight, axisBottom, axisLeft) and configuration methods for customizing ticks, tick format, tick size, and padding.
d3-axis methods reference
Axis configuration methods: axis.scale (set scale), axis.ticks (customize tick generation), axis.tickArguments (customize tick generation), axis.tickValues (set explicit tick values), axis.tickFormat (set tick format), axis.tickSize (set all tick sizes), axis.tickSizeInner (set inner tick size), axis.tickSizeOuter (set outer tick size), axis.tickPadding (set tick label padding), axis.offset (set pixel offset for crisp edges).
d3.axisBottom signature
d3.axisBottom(scale) creates a bottom axis generator. It is called on a D3 selection via .call(d3.axisBottom(x)) to render the axis for the given scale.
d3.axisLeft signature
d3.axisLeft(scale) creates a left axis generator. It is called on a D3 selection via .call(d3.axisLeft(y)) to render the axis for the given scale.