tick lines sometimes dissapear

hi, I am using tick lines to display a grid in the background of my simple vertical bars chart, but sometimes some of the vertical lines are not rendered. Inspecting the SVG, I can see the markup for the invisible lines there, and they look the same that the visible ones. Changing the value of the g transform x attribute (usually rounding to 1 decimal place) makes the hidden line visible. this happens both in firefox and chrome.

this is the markup for a good (visible) tick line:

<g class="tick" style="opacity: 1;" transform="translate(457.90990990990997,0)">
<line y2="-485" x2="0"></line>
<text dy=".71em" y="3" x="0" style="text-anchor: middle;">14</text></g>

this is the markup for an invisible line:

<g class="tick" style="opacity: 1;" transform="translate(527.8198198198198,0)">
<line y2="-485" x2="0"></line>
<text dy=".71em" y="3" x="0" style="text-anchor: middle;">16</text></g>

if I change “translate(527.8198198198198,0)” to “translate(527,0)” the line appears… is this a issue with the browser svg engine or something I can fix by changing some setup on my d3 chart?

[mbostock]

This is not something directly fixable in D3, since it is largely agnostic about the DOM that you create.

My guess is that you are using shape-rendering: crispEdges and a stroke-width that is less than 1px (or equivalently, have some sort of viewBox or transform that is causing the stroke to be less than 1px wide), and the browser is deciding to not show the lines at all rather than implicitly widening the stroke to be 1px. Unfortunately, many browsers don’t do a very good job of implementing crispEdges; Safari, for example, occasionally rounds a 1px line up to 2px (or even 3px!).

You can control the behavior more precisely by turning off crispEdges and instead positioning the ticks exactly on half-pixel boundaries, say by using scale.rangeRound and then offsetting the tick position by a half-pixel. However, note that in Firefox the SVG element itself can be positioned on a sub-pixel boundary, which then requires further offsetting to get the tick back on a whole-pixel. :\

[ajay-aviso]

Hi @mbostock, great thanks man for the explanation. You saved my time.