selection.exit - 余った要素を選択する

投稿日:2016/03/03 / 更新日:2016/03/03

d3.jsのselection.exit()は、実際に存在する要素に対して、関連付けたデータの数が足りなかった場合に、その差分の要素だけを含んだd3.selectionオブジェクトを作成するメソッドです。enter()の反対の働きをします。

サンプルコード

<ul>
	<li>1つ目の要素</li>
	<li>2つ目の要素</li>
	<li>3つ目の要素</li>
	<li>4つ目の要素</li>
	<li>5つ目の要素</li>
</ul>

// ul要素を選択
d3.select( "ul" )

// ul要素の中の、li要素を選択状態にする
.selectAll( "li" )

// li要素にデータ(3個)を関連付ける (2個足りない)
.data( [ "1個目のLI", "2個目のLI", "3個目のLI" ] )

// [exit()]を実行する
.exit()

// 余った分のli要素のテキストを変更する
.text( "余ってるで、これ" ) ;

デモ

RUN
HTML
CSS
JavaScript

<p>下のul要素の5個のli要素に対して、3個のデータを関連付けます。<code>exit()</code>で、余った分の要素を選択して、その要素にだけ処理を加えます。</p> <ul id="target" class="list"> <li>1つ目の要素</li> <li>2つ目の要素</li> <li>3つ目の要素</li> <li>4つ目の要素</li> <li>5つ目の要素</li> </ul> <ul> <li><a id="method1">実行</a></li> <li><a id="method2">リセット</a></li> </ul>

.list { padding: 0 0 0 36px ; list-style-type: disc ; } ul { margin: 24px 0 0 ; padding: 0 ; list-style-type: none ; } ul li { margin: 4px 0 0 ; padding: 0 ; } a { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-weight: 700 ; } a:hover { cursor: pointer ; background: #e6e6e6 ; }

// クリックイベント1 document.getElementById( "method1" ).onclick = function() { // ul要素を選択 d3.select( "ul" ) // ul要素の中の、li要素を選択状態にする .selectAll( "li" ) // li要素にデータ(3個)を関連付ける (2個足りない) .data( [ "1個目のLI", "2個目のLI", "3個目のLI" ] ) // [exit()]を実行する .exit() // 余った分のli要素のテキストを変更する .text( "余ってるで、これ" ) ; } // クリックイベント2 document.getElementById( "method2" ).onclick = function() { // ul要素を元に戻す d3.select( "ul" ).html( ulContent ) ; } // ul要素の中身をリセット用にキャッシュしておく var ulContent = d3.select( "ul" ).node().innerHTML ;

仕組み

exit()は、「データの数に対して余った分の要素だけを選択してくれる」と理解しておけば、支障はないと思います。

<ul>
	<li>1つ目の要素</li>
	<li>2つ目の要素</li>
	<li>3つ目の要素</li>
	<li>4つ目の要素</li>
	<li>5つ目の要素</li>
</ul>

// ul要素の中の全てのli要素を選択
d3.select( "ul" ).selectAll( "li" ) ;

exit()は、data()とセットで利用する関数です。要素の数が5個なのに対し、3個のデータを関連付けます。

// データを関連付けする (3個の値だから、2個のli要素が余ることになる)
.data( [ "1個目のLI", "2個目のLI", "3個目のLI" ] ) ;

ここでexit()を実行すると、データが関連付けられない、4個目、5個目のli要素を含むd3.selectionオブジェクトが返ります。

// 余った分を選択する
.exit() ;

exit()で選択した要素に対して、処理を行なうことができます。例えば、データが関連付けられない分に関しては削除、といった処理が可能です。

// 余ったli要素を削除する
.remove() ;

構文

selection = selection.exit()

戻り値
項目	説明
selection	関連付けるデータの数を超えた分の要素を含んだd3.selectionオブジェクトが戻り値となる。