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

code

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

今回は、余分な要素に対しての処理「Exit」についてとなります。

一般的な更新モデル

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

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

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についてでした。

関連情報

コメントを残す

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

CAPTCHA