d3-axis icon indicating copy to clipboard operation
d3-axis copied to clipboard

An option to generate grid lines

Open mbostock opened this issue 4 years ago • 3 comments

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).

mbostock avatar Oct 14 '21 16:10 mbostock

sometimes you want more grid lines than ticks

Fil avatar Oct 14 '21 17:10 Fil

Agreed. I usually accomplish more grid lines than ticks by using multiple axis instances, which works fairly well.

curran avatar Oct 14 '21 20:10 curran

An alternative pattern for grid lines that I have seen a lot:

yAxis.tickSize(-(width - margin.left - margin.right))

curran avatar Oct 14 '21 20:10 curran