selection.filter - 要素を絞り込む

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

d3.jsのselection.filter()は、d3.selectionオブジェクトの中から、フィルターに指定した条件に一致する要素だけに絞り込むメソッドです。

サンプルコード

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

// li要素を選択
var selection = d3.selectAll( "li" ) ;

// [:nth-child(even)]に一致する要素だけに絞り込む
var filterSelection = selection.filter( ":nth-child(even)" ) ;

// データを適当に関連付ける
var dataSelection = selection.data( [ 1, 0, 1, 0, 1 ] ) ;

// [1]のデータを持つ要素だけに絞り込む
var filterSelection = dataSelection.filter( function( d, i ) { return d === 1 ; } ) ;

デモ

RUN
HTML
CSS
JavaScript

<p><code>filter()</code>を使って、<code>:nth-child(even)</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() { // li要素を選択 var selection = d3.selectAll( "li" ) ; // [:nth-child(even)]に一致する要素に絞り込む var filterSelection = selection.filter( ":nth-child(even)" ) ; // フィルターで絞り込んだli要素の背景色を赤にする filterSelection.style( "background", "red" ) ; } // クリックイベント2 document.getElementById( "method2" ).onclick = function() { // ul要素を元に戻す d3.select( "ul" ).html( ulContent ) ; } // ul要素の中身をリセット用にキャッシュしておく var ulContent = d3.select( "ul" ).node().innerHTML ;

構文

selection = selection.filter( string || function )

引数
項目	説明
string	引数をCSSのセレクタで指定すると、そのセレクタの条件に一致する要素のみに絞り込まれる。
function	引数を、第1引数がデータ、第2引数がインデックス番号の関数で指定する。関数の戻り値が`true`の要素のみに絞り込まれる。

戻り値
項目	説明
selection	フィルターにより絞り込まれた要素だけで構成された新たなd3.selectionオブジェクトが戻り値となる。