selection.empty - セレクションが空か確認する

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

d3.jsのselection.empty()は、d3.selectionオブジェクトが空か否かを確認するためのメソッドです。空というのは、要素が含まれていないことを指します。なお、enter()で作成した、プレースホルダー状態の要素を含むd3.selectionオブジェクトは空じゃない(false)と判定されます。

サンプルコード

<ul id="target1">
</ul>

<ul id="target2">
	<li>1個目のLI</li>
</ul>

// [#target1]のliを選択する
d3.selectAll( "#target1 li" )

// 空か否かを確認する (true)
.empty() ;

// [#target2]のliを選択する
d3.selectAll( "#target2 li" )

// 空か否かを確認する (false)
.empty() ;

デモ

RUN
HTML
CSS
JavaScript

<p><code>d3.selectAll( "li" ).empty()</code>を実行するよ！</p> <ul id="target"> <li>1個目のLI</li> <li>2個目のLI</li> </ul> <ul> <li><a id="method1">LIを追加</a></li> <li><a id="method2">LIを削除</a></li> <li><a id="method3">empty()</a></li> </ul>

#target { margin: 0 ; padding: 0 ; list-style-type: disc ; } #target li { margin: 0 0 0 36px ; } 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() { // 1つLIを追加する d3.select( "#target" ).append( "li" ) ; // LIのテキストを変更 d3.selectAll( "#target li" ).text( function( d, i ) { return ( i + 1 ) + "個目のLI" ; } ) ; } // クリックイベント2 document.getElementById( "method2" ).onclick = function() { // 1つLIを削除する d3.select( "#target li:last-child" ).remove() ; } // クリックイベント3 document.getElementById( "method3" ).onclick = function() { // 空か否かを確認する var isEmpty = d3.select( "#target li" ).empty() ; // 結果を出力 this.textContent = "empty()→" + isEmpty.toString() ; }

構文

isEmpty = selection.empty()

戻り値
項目	説明
isEmpty	d3.selectionオブジェクトが空だった場合には`true`、空じゃなかった場合には`false`が戻り値となる。