D3.js で rect を描くと辺の太さが均一にならない

表題の通りなのですが rect を append して下記の svg タグが生成されたとき、

<rect x="0" y="0" width="190" height="200" stroke="#008080" fill="white" stroke-width="5" style="stroke-opacity: 0.5;"></rect>

表示が

のようになってしまって明らかに右辺と下辺が太くておかしくなってしまいました。

どうしたものかと調べたところ

rect borders are not sharp

Try changing your origin to offset by a half-pixel on both "x" and "y", so the SVG comes out like so

ということで stroke-width x 0.5 を x と y の offset に指定したところ期待した通り描画されました。

<rect x="2.5" y="2.5" width="190" height="200" stroke="#008080" fill="white" stroke-width="5" style="stroke-opacity: 0.5;"></rect>

D3.js、軽く触った程度ですが結構ごりっと書く感じなので JavaScript や jQuery に慣れていないとなかなかとっつきにくいかもですね。。