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

Option to hide domain path (line) #48

Closed
ondrejsevcik opened this issue Aug 11, 2018 · 5 comments
Closed

Option to hide domain path (line) #48

ondrejsevcik opened this issue Aug 11, 2018 · 5 comments

Comments

@ondrejsevcik
Copy link

Hi, it would be nice to have an api for hiding domain line. Sometimes axis on a side doesn't need to show domain line, just values. Currently it is possible to hide it with css, but it would be nicer to not render it in a first place.

Thank you

@mbostock
Copy link
Member

I typically achieve this using the “post-selection” technique (modifying the DOM after creation by the axis). For example:

g
  .attr("transform", `translate(${margin.left},0)`)
  .call(d3.axisLeft(y).ticks(8, "$.0f"))
  .call(g => g.select(".domain").remove())

https://beta.observablehq.com/@mbostock/d3-line-chart

Since post-selection enables a wide array of customizations, without needing to support them explicitly in d3-axis, that is my preferred approach.

@kiranb555
Copy link

.call(g => g.select(".domain").remove())

works well

@matthewverde
Copy link

Yes the provided solution above works, but that just feels way to hacky to be considered THE solution. Having an actual API to toggle this would be much appreciated.

@curran
Copy link
Contributor

curran commented Jun 9, 2019

I agree with @matthewverde . I think of the post-selection approach as introducing extra computational overhead by rendering the domain path, then removing it. It's unnecessary DOM manipulation that could be avoided. That said, it's not critical either in the grand scheme of things, but a "nice to have" sort of thing.

@airportpeople
Copy link

I've also used this

yAxis_group.select('.domain')
                    .attr('stroke-width', 0);

After defining and calling the yAxis_group (i.e., svg.append('g') ... .call(yAxis)).

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

6 participants