Best way to arrange tick text using d3

By default when I set up ticks with D3, the text overlaps with the lines as follows:

I am aware of two ways to correct this but both are flawed. The easiest way would be to add something like:

transform(0 -20px)

to the text element's css. the problem here is browser compatibility. The more browser-compatible way of doing things is:

d3.selectAll('text').attr('transform','translate(0,-20)')

The problem is that this won't work with dynamic scales; the function must run after the text elements have been appended so it's not compatible with transitionally updating tick scales.

via Chebli Mohamed