図形の位置やサイズを指定する

前回は、svg要素、rect要素を生成しました。
ですが、SVGでは要素を生成しただけでは、何も表示されません。
図形の位置やサイズを指定しなければなりません。
D3.jsで図形の位置やサイズを指定するには、
attr()メソッドを使いします。attr()メソッドだけで、
全ての要素の色、サイズを指定できます。D3.jsでは
多くのメソッドを覚える必要はないです。
その変わり操作するsvg要素の属性名を知らないといけません。

rect要素には、以下の属性があります。

属性	説明
x	X座標
y	Y座標
width	幅
height	高さ

上記の属性名と設定する値をattr()メソッドで指定します。
attr()メソッドは第１引数に属性名、第２引数に設定値を
指定します。たとえば、y属性に値を100を指定するなら
下記のように書きます。

attr("y",100)

属性名は「"」と「"」で囲んで文字列を指定し、設定する内容は
属性によって異なり、数値、文字列になります

特定の図形を操作したい

特定のrect要素を操作したい場合もあるかと思います。
この場合はrect要素にid名を指定しておいて、d3.select()を使ってID名を指定します。
後はattr()メソッドを使って属性値を設定します。同様に、クラス名を
指定しておくと、複数の要素を操作することができます。

スタイルや属性をまとめて指定する

attr()メソッドとstyle()メソッドは、
引数にオブジェクトリテラル形式
({属性名:値,.....})を指定することができます。
今回のサンプルコードをオブジェクトリテラルに形式に
書き換えると下記のようになります。属性名は"x"のように
文字列で指定することできます。
スタイルシートプロパティ名に「-」ハイフンが含まれる場合は
文字列で指定します。

d3.select("#sample")
.attr({
x: "50px",
y: "50px",
width: "100px",
height: "60px",

})

attr()メソッドの他の使い道

D3.jsではグラフを動的に変化させたいときもattr()メソッドが大事です。
D3.jsではtransition()メソッドをメソッドチェーンに挟み込むだけで
アニメーションさせることができます。そのとき、アニメーションの
初期値と終了値をattr()メソッドで指定します。

サンプルコードのコメントアウトを外して確認すると分かりますが、
メソッドチェーンにtransition(),duration()を追加して四角形を
アニメーションさせています。
四角形の横幅を２秒かけて変化させています。
アニメーションの速度はduration()メソッドで設定できます。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>図形の位置やサイズを指定する</title>

	<style>
	svg{
		width:320px;
		height:240px;
		border:2px solid black;
	}
	rect{fill:yellow;}
	</style>
	<script src="../js/d3.js"></script>
</head>
<body>
	<h1>D3.jsを使いsvg要素の生成する</h1>
	<div id="sample"></div>

	<script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>図形の位置やサイズを指定する</title>

<style>

svg{

width:320px;

height:240px;

border:2px solid black;

}

rect{fill:yellow;}

</style>

</head>

<body>

<h1>D3.jsを使いsvg要素の生成する</h1>

</body>

</html>

	d3.select("#sample")
	.append("svg")
	.append("rect")
	.attr("x","50px")
	.attr("y","50px")
	.attr("width","180px")
	.attr("height","60px")
/*
	.transition()          //アニメーションをするように設定
	.duration(2000)        //２秒アニメーションを行う
	.attr("width","20px"); //アニメーション完了後の横幅
*/

d3.select("#sample")

.append("svg")

.append("rect")

.attr("x","50px")

.attr("y","50px")

.attr("width","180px")

.attr("height","60px")

.transition() //アニメーションをするように設定

.duration(2000) //２秒アニメーションを行う

.attr("width","20px"); //アニメーション完了後の横幅