【d3.js】更新モデル「enter-update-exitパターン」を考える。

code

動的データセットを使ったデータビジュアライゼーションの基本となる、更新モデル「enter-update-exitパターン」の基礎をご紹介していきます。

一般的な更新モデル

動的なデータビジュアライゼーションを実装するのに、以下の3ステップによる一般な更新モデルで考え定期ます。

  1. DOM(Document Object Model)要素を選択する
  2. 要素にデータを結びつける(バインド)
  3. 要素を「作成」「更新」「削除」してデータを視覚表現します。

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 = 5

enter

新しくデータセットに追加され、まだ描かれていないもの。


例)

div要素が生成されたら、div要素に更新内容を反映。
enter を使用しない場合、更新が反映されない。

update

現在のデータセットで描かれているもの。

例)

既存のdiv要素に変更があった場合、div要素に更新内容を反映。
.enter()を使用しないと update処理になります。

exit

既存にあるが、データセットから削除されているもの。

例)

div要素2つに更新があり、残りのdiv要素に更新がなかった場合
exit().remove();メソッドを使うと更新のないdiv要素を削除できる。

<div>要素が3つ追加されます。

まとめ

更新モデルの最初の考え方と基本でした。これから既存要素の更新などもご紹介していきます。

関連情報

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA