blurry svg rendering?

[Joe Golike]

I'm looking to transition from protovis over to d3, and have been
working through the tutorials. One thing I've noticed is that the svg
rendering appears to be blurry.

See what I'm talking about here:
http://dl.dropbox.com/u/1690531/d3/index.html

Screenshots:
http://dl.dropbox.com/u/1690531/d3/img/blur.png
http://dl.dropbox.com/u/1690531/d3/img/blur-zoom.png

The top chart is div's, the bottom is svg. When zoomed in, it looks
like the svg isn't rendering exactly on the pixel grid, or something.
I'm developing in Safari on my Mac, but it looks the same in Chrome
and FF as well as all browsers on my PC.

Any ideas?

Joe

[Mike Bostock]

If you want the fill to render without anti-aliasing, you may have to
offset by 0.5 pixels. The problem is that the stroke is centered on
the border of the fill, so, either the fill will land on the exact
pixel boundary, or the stroke. Alternatively, you can use
shape-rendering: crispEdges in CSS, but that's not great for
transitions. Also, you'll probably want to use rangeRoundBands with an
ordinal scale:

https://github.com/mbostock/d3/wiki/Ordinal-Scales#ordinal_rangeRoundBands

Mike

[Joe Golike]

Awesome, using an 0.5 offset worked. Thanks Mike.