selection.enter - 足りない要素を選択する

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

d3.jsのselection.enter()は、関連付けたデータの数に対して、実際に存在する要素が足りなかった場合、その差分だけプレースホルダー状態(処理を適用できる状態)のオブジェクトを作成するメソッドです。「足りない分を補填する」というイメージで支障はないと思います。

サンプルコード

<ul></ul>

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

// ul要素の中の、li要素を選択状態にする (まだ存在しない)
.selectAll( "li" )

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

// 存在しないli要素を選択しているd3.selectionオブジェクトに対して[enter()]を実行する
.enter()

// ul要素に補填された分のli要素を追加する
.append( "li" )

// 補填された分のli要素のテキストを変更する
.text( function( d, i ) { return d ; } ) ;

デモ

RUN
HTML
CSS
JavaScript

<p>下のul要素の5個のli要素に対して処理するんだけど、足りない分だけ補填して追加されるよ。2回目の実行では既に5個のli要素があるから何も補填されない(=何も起こらない)よ。</p> <ul id="target" class="list"> <li>1つ目のLI</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#target" ) // ul要素の中の、li要素を選択状態にする (まだ存在しない) .selectAll( "li" ) // 存在しないli要素にデータ(5個)を関連付ける .data( [ "1個目のLI", "2個目のLI", "3個目のLI", "4個目のLI", "5個目のLI" ] ) // 存在しないli要素を選択しているd3.selectionオブジェクトに対して[enter()]を実行する .enter() // ul要素にli要素を追加する .append( "li" ) // テキストを変更する .text( function( d, i ) { return d ; } ) ; } // クリックイベント2 document.getElementById( "method2" ).onclick = function() { // ul要素を元に戻す d3.select( "ul" ).html( ulContent ) ; } // ul要素の中身をリセット用にキャッシュしておく var ulContent = d3.select( "ul" ).node().innerHTML ;

仕組み

enter()は、「足りない分だけ補填してくれる働きをする」と理解しておけば、大きく間違わないと思います。d3.jsのselect()、またはselectAll()は、getElementById()のように「取得する」のではなく、「選択する」と表現した方がしっくりきます。まだ存在していない要素も、あらかじめ選択状態にできます。説明は、メソッドチェーンで前後のコードと繋がっているので、ご注意下さい。

<ul></ul>

// ul要素の中の全てのli要素を選択 (まだ存在しない)
d3.select( "ul" ).selectAll( "li" ) ;

enter()は、data()とセットで利用する関数です。まだ存在していないli要素を選択したら、今度はdata()を使って、配列を関連付けします。ここで指定した値の数だけ、最終的にli要素が存在することになると覚えておきましょう。ちょっと回りくどい表現ですが、5個の値を関連付けたら最終的に5個、10個の値を関連付けたら最終的に10個のli要素が存在することになります。

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

さて、ここでenter()の登場です。data()で関連付けした後、enter()を実行して下さい。ここで、例えば、あらかじめli要素が2個あった場合は3個、4個あった場合は1個…、というように、足りない分だけ、li要素が補填されます。足りない分の要素を含むプレースホルダー状態のオブジェクトを作成します。

// 足りない分を補填する
.enter() ;

enter()の後は、enter()で補填された分だけが処理の対象となります。元からあるli要素には、ここからの処理は適用されません。それでは、append()で補填した分のli要素を、ul要素に追加した後、text()で要素内にテキストを加えましょう。

// 補填した分、追加する
.append( "li" )

// 補填した分のテキストの内容を変更する
.text( function( d, i ) { return d ; } ) ;

構文

selection = selection.enter()

戻り値
項目	説明
selection	補填された要素の部分のデータを含む、プレースホルダー状態のd3.selectionオブジェクトが戻り値となる。