のんびりしているエンジニアの日記

ソフトウェアなどのエンジニア的な何かを書きます。

d3.jsを使ってみる(3) d3.dataをつかってタグにデータを適応する

Javascript:JQuery
Sponsored Links

皆さんこんにちは
お元気ですか。可視化って楽しいと思います。

三度目になって同じことを繰り返しますが…
いよいよd3っぽいことをしてみたいと思います

<head>
<meta charset = "utf-8">
</head>
<body>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<p>あいうえお</p>
	<p>あいうえお</p>
	<p>あいうえお</p>
	<script type="text/javascript">
	</script>
</body>

<script type="text/javascript">
        var datas = [12,36,108];
	var p = d3.select("body").selectAll("p");
	p.data(datas).text(function(d){
	return d
        });
</script>

f:id:tereka:20140814154106p:plain

気づいている人はいると思いますが、今回はpタグとdatasの長さが同じです。世の中こう都合よくはいきません。

p.dataに含まれるのは3つの種類があります。
update・・・普通に更新される内容
enter・・・追加が必要な内容
exit・・・必要がない

要はこの三種類それぞれについて対応する必要があります。

Update+Enter

<script type="text/javascript">
	var datas = [12,36,108,124];
	var p = d3.select("body").selectAll("p");
	update = p.data(datas)
	enter = update.enter()

	update.text(function(d){
		return d;
	})
	enter.append("p").text(function(d){
		return d;
	})
</script>

f:id:tereka:20140814155541p:plain

update地点では通常の更新を、enterではそもそもタグが不足しているので、まずは、タグを追加します。
その次にupdateと同じ挙動を行っています。

Update+Exit

<script type="text/javascript">
	var datas = [12,36];
	var p = d3.select("body").selectAll("p");
	update = p.data(datas)
	exit = update.exit()

	update.text(function(d){
		return d;
	})

	exit.remove()
</script>

f:id:tereka:20140814155757p:plain

updateでは同じ動作をしますが、exitについては必要がないのでremoveしています。

参考文献

D3.js入門 (全17回) - プログラミングならドットインストール