Option to hide domain path (line)

[Ondrej Sevcik]

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

[Mike Bostock]

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.

[devkiran]

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

works well

[matthewverde]

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 Kelleher]

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.

[Leon]

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