スポンサーリンク
スポンサーリンク

四角形・角丸四角形を描画する

SVGは図形を表す要素を指定することで描画を実行します。
SVGは下記の表に示す図形要素があります。

要素 説明
rect 四角形・角丸四角形
circle 正円
ecllipse 楕円形
line 直線
polyline 連続直線
polygon 多角形
path パス(複雑な図形を描画)
text 文字

D3.jsではすべての図形要素を使うことはまずないです。
使いそうなのは以下のものです。
1.rect  四角形・角丸四角形
2.circle 正円
3.path  パス(複雑な図形を描画)
4.text  文字

rect要素を使い、四角形・角丸四角形を描画する

rect要素は下記の表の属性を指定することで四角形を描画できます、
D3.jsでもこれらの属性値を設定することで四角形を描画します。

属性 説明
x X座標 省くと0
y Y座標 省くと0
width 横幅
height 高さ
rx 横方向の角丸半径
ry 縦方向の角丸半径

サンプルコードの実行結果はこちら

コメント

タイトルとURLをコピーしました