次は正円を描画します。正円を描画するには、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座標 |
サンプルコードの実行結果はこちら
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>正円とパスを描画する</title> <style> svg{min-height:400px;} </style> <script src="../js/d3.js"></script> </head> <body> <h1>正円を描画する</h1> <svg> <circle cx="140" cy="150" r="120" /> </svg> <h1>パスを描画する</h1> <svg> <!-- 開始点(10px,110px)、終了点(250px,110px)で 制御点(80px,-80px)、制御点(140px,60px)を 結ぶベジエ曲線を下記の描画します。 --> <path d="M10,110 C80,-80 140,60 250,110" /> </svg> <script src="test.js"></script> </body> </html> |