動的データセットを使ったデータビジュアライゼーションの基本となる、更新モデル「enter-update-exitパターン」の基礎をご紹介していきます。
今回は、余分な要素に対しての処理「Exit」についてとなります。
目次
一般的な更新モデル
動的なデータビジュアライゼーションを実装するのに、以下の3ステップによる一般な更新モデルで考え定期ます。
- DOM（Document Object Model）要素を選択する
- 要素にデータを結びつける（バインド）
- 要素を「作成」「更新」「削除」してデータを視覚表現します。
enter-update-exitパターン
d3.jsでは、この更新モデルをenter-update-exitパターンを使うことで、実装できるようになっています。
HTML/JavaScriptサンプル
今回は、要素を追加したのち、余分な要素を取り除くExitについてです。
<!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>Already dataset 1</div>
<div>Already dataset 2</div>
<div>Already dataset 3</div>
</div>
<script>
var dataset = [1, 2]; // データ
var dataArea = d3.select("#DataArea").selectAll("div").data(dataset) //要素をセレクト
dataArea.style("color", "#300")
.text(function(d){return "This dataset = " + d;});
dataArea.exit().remove(); // 余分な要素を取り除く
</script>
</body>
</html>
exit – 余分な要素を取り除く
すでにHTML上で<div>要素が下記のように3つある状態だとします。
<div>Already dataset 1</div>
<div>Already dataset 2</div>
<div>Already dataset 3</div>データを2つセットし、div>要素にテキストとスタイルを追加します。
var dataset = [1, 2]; // データ
var dataArea = d3.select("#DataArea").selectAll("div").data(dataset) //要素をセレクト
dataArea.style("color", "#300")
.text(function(d){return "This dataset = " + d;});
dataArea.exit().remove(); // 余分な要素を取り除くデータが2つで、<div>要素が3つなので
3つの目の<div>要素がそのまま残り、不要な場合は
This dataset = 1
This dataset = 2
Already dataset 3.exit()メソッドを使って、余分な要素（データが入ってない）を取り除きます。
dataArea.exit().remove(); // 余分な要素を取り除く取り除かれました。
This dataset = 1
This dataset = 2| .exit() | 余分な領域を選択して |
| .remove() | 余分な要素を削除します |
まとめ
更新モデルのEnter-Update-Exitのうち、余計な要素を扱うExitについてでした。
関連情報
リンク
リンク
リンク
