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

正円とパスを描画する

次は正円を描画します。正円を描画するには、circle用を使い、
下記の表の属性を指定することで正円が描画できます。

属性 説明
cx 円の中心のX座標 省くと0
cy 円の中心のY座標 省くと0
r 円の半径

パスを描画する

D3.jsでよく利用するのが、rect要素、circle要素、それと今回の
記事で触れるpath要素です。path要素を使えばどのような図形でも
描くことができます。四角形・円もrect要素、circle要素と同じように
path要素で描画できます。path要素で扱う属性は「d」属性のみです。
pathlength属性とかありますが使用しません。

SVGで複雑な図形を描画する場合、d属性のパスデータに命令と座標を
セットで設定します。命令と座標がセットになっています。
座標値は「,」(カンマ)で区切って表記しますが、
半角スペースで区切っても大丈夫です。

d属性で指定できる命令と座標値

命令 座標値
移動に関する命令
M 絶対X座標,絶対Y座標
m 相対X座標,相対Y座標
path制御に関する命令
Zまたはz pathを閉じる
直線描画に関する命令
L 絶対X座標,絶対Y座標
l 相対X座標,相対Y座標
曲線描画に関する命令(3次ベジエ曲線)
C 絶対X座標1,絶対Y座標1,絶対X座標2,絶対Y座標2,・・・・・
c 相対X座標1,相対Y座標1,相対X座標2,相対Y座標2,・・・・・
楕円弧に関する命令
A 横半径,縦半径,回転角度,長弧フラグ1,短弧フラグ,絶対X座標,絶対Y座標
a 横半径,縦半径,回転角度,長弧フラグ1,短弧フラグ,相対X座標,相対Y座標

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

コメント

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