A chart grid is a set of horizontal or vertical reference lines aligned with an axis’s tick positions. In D3, expand axis ticks with tickSize() so they extend across the chart behind the plotted data. section 5.2.3
Build a grid by:
- Creating an axis with the desired scale and tick values. section 5.2.3
- Setting tickSize() to the inner chart dimension, using a negative height to extend bottom-axis ticks upward. section 5.2.3
- Appending the grid axis before the chart paths, because SVG draws elements in appearance order. section 5.2.3
- Hiding the axis path and tick labels with CSS while retaining the extended tick lines. section 5.2.3
Streamgraph grid
A bottom axis for a streamgraph uses five-year tick values and removes its outer ticks. Setting tickSize(innerHeight * -1) turns those ticks into vertical reference lines spanning the inner chart. section 5.2.3
const bottomAxis = d3.axisBottom(xScale) .tickValues(d3.range(1975, 2020, 5)) .tickSizeOuter(0) .tickSize(innerHeight * -1);
Inspect the complete D3 axis declaration that converts bottom-axis ticks into a vertical chart grid. section 5.2.3
