An axis generator is a D3 function that takes a scale and returns the SVG elements that compose a chart axis. Axes provide reference points for interpreting dates, categories, and numeric values. section 4.1.2
Build an axis by connecting a scale, an orientation, and an SVG group:
- Declare a scale whose domain represents the data and whose range represents chart coordinates. A time scale can position dates horizontally, while a linear scale can position temperatures vertically. section 4.1.2
- Create an oriented generator such as d3.axisBottom(xScale) or d3.axisLeft(yScale). section 4.1.2
- Append an SVG group and call the generator on it. Translate a bottom axis to the inner chart’s lower edge because generators start at the selection’s origin. section 4.1.2
- Format tick labels when the default representation is unclear, such as displaying abbreviated month names with d3.timeFormat("%b"). section 4.1.2
Monthly temperature line chart
Use a time scale for monthly dates and a linear scale for Fahrenheit values. Create a bottom axis from the time scale and a left axis from the temperature scale, then append each to an SVG group. Move the bottom group to innerHeight and format its ticks as abbreviated month names. Style or reposition generated text afterward when labels need clearer spacing. section 4.1.2
Responsive bar chart
When framework names become cramped on a mobile layout, create a mobile chart with horizontal bars and a vertical band-scale axis. Show awareness percentages at bar tips instead of using a separate percentage axis. section 9.3.3
const bottomAxis = d3.axisBottom(xScale);
innerChart
.append("g")
.attr("class", "axis-x")
.attr("transform", `translate(0, ${innerHeight})`)
.call(bottomAxis);
Inspect the complete bottom-axis placement pattern: create the generator, append its group, translate it to the chart’s bottom edge, and call it. section 4.1.2
