読者です 読者をやめる 読者になる 読者になる

べにやまぶろぐ

技術寄りの話を書くつもり

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

D3.js JavaScript

表題の通りなのですが 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>

表示が

f:id:beniyama:20140320180509p:plain

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

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

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>

f:id:beniyama:20140320180501p:plain

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