D3.jsでSVG図形を作成してみる

2015年10月14日

ページ内にdiv要素の中にsvg要素およびSVG図形の１つであるrect要素を
生成します。svg要素にはスタイルシートを設定します。

svg要素を生成する

svg要素を生成対象となるdiv要素を指定しなければなりません。
D3.jsでじゃ、select()メソッドを使い要素を指定します。
d3.jsで使用されるメソッドは全てd3という名前のオブジェクトに
はいっています。
たとえばID名「sample」のdiv要素を指定するなら下記のように書きます。

d3.select("#sample")

select()メソッドの引数にCSSと同じセレクタを指定します。
JavaScriptならdocument.querySelector()の引数と同じです。
jQueryなら$( )です。select()メソッドはセレクタに一致した
最初の要素だけを対象にします。同じCSSクラスを持つ複数の要素が
ある場合でも、最初に見つかった１つの要素しか対象になりません。

select()メソッドでdiv要素を特定したら、append()メソッドを使い、
svg要素を生成します。append()メソッドは引数に指定した要素を
追加します。このとき、指定された要素の内側に追加されます。

rect要素を生成する

d3.select()でdiv要素を指定し、append()でsvg要素を追加することは
かわりません。append("svg")の次の行にappend("rect")を書きます。
append()を使うと、要素の中に指定した要素が生成されます

それと、操作対象とする要素を変数に代入することもあります。

var s = d3.select("#sample") //ID sampleを指定

複数のrect要素を生成する

１つのsvg要素の中にrect要素を生成します。
下記のサンプルコードの実行結果のページをひらき
Chrome,IEならF12ボタンを押し、デベロッパーツールを開くと
svg要素の中に２つのrect要素が生成されているのが確認できます。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>SVG要素を生成する</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="svgAdd"></div>

	<h1>D3.jsを使いrect要素の生成しますが、
		幅、高さを未設定のため表示されません</h1>
	<div id="rectAdd"></div>

	<h1>D3.jsを使い複数のrect要素の生成する</h1>
	<div id="twoSvg"></div>

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

<!DOCTYPE html>

<head>

<title>SVG要素を生成する</title>

<style>

svg{

width:320px;

height:240px;

border:2px solid black;

}

rect{fill:yellow;}

</style>

</head>

<body>

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

<h1>D3.jsを使いrect要素の生成しますが、

幅、高さを未設定のため表示されません</h1>

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

</body>

</html>

	//svg要素を生成
	d3.select("#svgAdd")
	.append("svg");

	//svg要素→rect要素を生成
	d3.select("#rectAdd")
	.append("svg")
	.append("rect");

	//複数のrect要素を生成
	var svg1 = d3.select("#twoSvg")
		.append("svg");

	svg1.append("rect");
	svg1.append("rect");

//svg要素を生成

d3.select("#svgAdd")

.append("svg");

//svg要素→rect要素を生成

d3.select("#rectAdd")

.append("svg")

.append("rect");

//複数のrect要素を生成

var svg1 = d3.select("#twoSvg")

.append("svg");

svg1.append("rect");