Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

An option to generate grid lines #81

Open
Tracked by #64
mbostock opened this issue Oct 14, 2021 · 3 comments
Open
Tracked by #64

An option to generate grid lines #81

mbostock opened this issue Oct 14, 2021 · 3 comments

Comments

@mbostock
Copy link
Member

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

@Fil
Copy link
Member

Fil commented Oct 14, 2021

sometimes you want more grid lines than ticks

@curran
Copy link
Contributor

curran commented Oct 14, 2021

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

@curran
Copy link
Contributor

curran commented Oct 14, 2021

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

3 participants