正円とパスを描画する

2015年10月13日

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

属性	説明
cx	円の中心のX座標　省くと０
cy	円の中心のY座標　省くと０
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座標
曲線描画に関する命令(３次ベジエ曲線)
C	絶対X座標１,絶対Y座標１,絶対X座標２,絶対Y座標２,･････
c	相対X座標１,相対Y座標１,相対X座標２,相対Y座標２,･････
楕円弧に関する命令
A	横半径,縦半径,回転角度,長弧フラグ１,短弧フラグ,絶対X座標,絶対Y座標
a	横半径,縦半径,回転角度,長弧フラグ１,短弧フラグ,相対X座標,相対Y座標

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

<!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>

<!DOCTYPE html>

<head>

<title>正円とパスを描画する</title>

<style>

svg{min-height:400px;}

</style>

</head>

<body>

<h1>正円を描画する</h1>

<svg>

</svg>

<h1>パスを描画する</h1>

<svg>

<!--

開始点(10px,110px)、終了点(250px,110px)で

制御点(80px,-80px)、制御点(140px,60px)を

結ぶベジエ曲線を下記の描画します。

-->

</svg>

</body>

</html>