d3-axis
d3-axis copied to clipboard
An option to generate grid lines
This is another frequent pattern:
svg.append("g")
.attr("transform", `translate(${marginLeft},0)`)
.call(yAxis)
.call(g => g.selectAll(".tick line").clone()
.attr("x2", width - marginLeft - marginRight)
.attr("stroke-opacity", 0.1))
It’d be nice if this were an option you could pass to the axis, especially for transitions. Note that you’ll need to tell the axis how long the grid lines need to be (width - marginLeft - marginRight).
sometimes you want more grid lines than ticks
Agreed. I usually accomplish more grid lines than ticks by using multiple axis instances, which works fairly well.
An alternative pattern for grid lines that I have seen a lot:
yAxis.tickSize(-(width - margin.left - margin.right))