D3.js 基本1 – テンプレートhtmlを作る

このページは"D3.jsチュートリアル"シリーズの1 / 20です。

D3.jsは現在世界中で活発に広まりつつある、Javascriptのデータビジュアライゼーションツールです。D3.jsでどういうことができるかは、作成者のMike Bostockのページを見てみてください。

D3を簡単に言うと、データに合わせてsvg要素を描いていくツールです。svgとはHTMLで使える描画要素で、円・四角・線を描いたり、角度を変えたり歪めることができます。データとしてはcsv、JSONやJavascriptのリスト・連想配列が使えます。

ここではまず、何も表示しない基本的なテンプレートを作ります。このような基本テンプレートを作って保存しておけば、新しいプロジェクトを作るときに、コピーするだけで面倒なコードを書かずに済みます。
1.まず通常のHTMLテンプレートを用意します。たとえば下のコードをtemplate.htmlとして保存してください。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
</body>

</body>
</html>

2.次にD3.jsを読み込みます。template.htmlのbodyタグの中に、下のどちらかの方法でスクリプトタグを書きます。
・CDNを使ったネットを介してコードを読み込む場合:

<script src="http://d3js.org/d3.v3.min.js"></script>

・ローカルファイルを使う場合:
公式サイトからD3.jsをダウンロードして、上で作ったhtmlと同じフォルダにd3.min.jsを置き、jsをhtmlに読み込む。

<script src="d3.min.js"></script>

3.D3を使って、その下にキャンバスとして機能するsvgタグを追加します。実際にはこのsvgタグの下に円や四角のsvgタグを加える事で、画面に表示されるようになります。今回は何も入っていないsvgタグだけです。

<script>
	var width = 960;
	var height = 700;

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

</script>

解説:
heightとwidthで、svgの縦と横の長さを指定しています。
d3.select(“body”)でHTMLのbodyタグを選び、append(“svg”)でその中にsvgタグを作っています。
.attr(“width”,width)とattr(“height”,height)で、svgの属性widthとheightに、変数として作成したwidthとheightを指定しました。
詳しい説明は少し先のページで行います。

全体のコード:
結果としてtemplate.htmlは下のようになります。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>

	<script src="http://d3js.org/d3.v3.min.js"></script>

	<script>
		var width = 960;
		var height = 700;

		var svg = d3.select("body").append("svg")
		.attr("width", width)
		.attr("height", height);
	</script>

</body>
</html>

実際のhtmlファイルはここに置いています。(リンク
4.最後にブラウザを使ったデバッグで、ちゃんとsvg要素ができているかを確認します。
作ったtemplate.htmlをブラウザで実行します。FirefoxやChromeではそのページの上で右クリックして「要素を検証」や「要素を調査」を選びます。FirefoxにFirebugを入れているなら、下のように「Firebugで要素を調査」をクリックします。

Firefoxで要素を検証
Firefoxで要素を検証

そこでまずConsleタブにエラーが出ていないことを確認します。
次にHTMLタブから、作られたHTML要素を見ます。Chromeの場合はElementsタブから見れます。bodyの下にsvgができていて、widthとheight属性が指定したとおりになっていれば成功です。

svgタグが追加されている
svgタグが追加されている

このsvgはD3.jsが作ったものです。もし何かのプロジェクトを作っていて何も表示されない時は、このHTMLを見ると、svg要素の有無、間違った位置の挿入、間違った属性などがわかります。たとえばsvgタグがなかったり、svgタグ内に要素が追加されていないなら、その要素は表示されません。

ここで作ったテンプレートは、だいたいどんなときでも最初に書くものなので、いちいち書くよりも保存してコピーして使いまわすと便利です。


コメントを残す