表題の通りなのですが 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>
表示が
のようになってしまって明らかに右辺と下辺が太くておかしくなってしまいました。
どうしたものかと調べたところ
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 に慣れていないとなかなかとっつきにくいかもですね。。