d3-axis provides D3 functions that construct chart axes from scales. Choose an axis generator, call it on an SVG group, then position and format the generated elements. section 4.1.2
Build axes around a line chart in a few steps:
- Create a bottom axis with d3.axisBottom(xScale) or a left axis with d3.axisLeft(yScale). section 4.1.2
- Append a group to the chart and invoke the generator with selection.call(). section 4.1.2
- Translate a bottom-axis group by innerHeight because SVG coordinates place the selection origin at the top left. section 4.1.2
- Format time labels with tickFormat(d3.timeFormat("%b")), then style or reposition the generated text elements. section 4.1.2
const bottomAxis = d3.axisBottom(xScale);
innerChart
.append("g")
.attr("class", "axis-x")
.attr("transform", `translate(0, ${innerHeight})`)
.call(bottomAxis);
This complete pattern creates a bottom axis, appends its SVG group, moves it to the chart base, and renders it. section 4.1.2
Readable monthly labels
const bottomAxis = d3.axisBottom(xScale) .tickFormat(d3.timeFormat("%b")); innerChart.append("g") .attr("class", "axis-x") .attr("transform", `translate(0, ${innerHeight})`) .call(bottomAxis); section 4.1.2
