動的データセットを使ったデータビジュアライゼーションの基本となる、更新モデル「enter-update-exitパターン」の基礎をご紹介していきます。
目次
一般的な更新モデル
動的なデータビジュアライゼーションを実装するのに、以下の3ステップによる一般な更新モデルで考え定期ます。
- DOM（Document Object Model）要素を選択する
- 要素にデータを結びつける（バインド）
- 要素を「作成」「更新」「削除」してデータを視覚表現します。
enter-update-exitパターン
d3.jsでは、この更新モデルをenter-update-exitパターンを使うことで、実装できるようになっています。
HTML/JavaScriptサンプル
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
font: 14px sans-serif;
padding: 3px;
margin: 1px;
}
</style>
<script src="d3.min.js"></script>
</head>
<body>
<div id="DataArea">
</div>
<script>
var dataset = [1, 2, 3, 4, 5]; // データ
var dataArea = d3.select("#DataArea").selectAll("div").data(dataset) //id指定により要素をセレクト
dataArea.enter() // データの個数分だけ
.append("div") // div要素を追加
.text(function(d){return "This dataset = " + d;}); // テキスト追加
</script>
</body>
</html>.enter()メソッドを使って、div要素を新たに追加しています。
実行結果
<div> 要素が追加されました。
This dataset = 1
This dataset = 2
This dataset = 3
This dataset = 4
This dataset = 5enter
新しくデータセットに追加され、まだ描かれていないもの。
例）
div要素が生成されたら、div要素に更新内容を反映。
enter を使用しない場合、更新が反映されない。
update
現在のデータセットで描かれているもの。
例）
既存のdiv要素に変更があった場合、div要素に更新内容を反映。.enter()を使用しないと update処理になります。
exit
既存にあるが、データセットから削除されているもの。
例）
div要素2つに更新があり、残りのdiv要素に更新がなかった場合exit().remove();メソッドを使うと更新のないdiv要素を削除できる。
<div>要素が3つ追加されます。
まとめ
更新モデルの最初の考え方と基本でした。これから既存要素の更新などもご紹介していきます。
関連情報
リンク
リンク
リンク
