selection.each - 各要素に関数を実行する

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

d3.jsのselection.each()は、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要素を選択する
d3.selectAll( "li" )

// 各要素に関数を実行する
.each( function( d, i ) {
	// d = [data()]などで要素に関連付けられたデータ
	// i = インデックス番号
	// this = 要素

	// 語尾に「だよ」を加える
	this.textContent += "だよ" ;
} ) ;

デモ

RUN
HTML
CSS
JavaScript

<p>各li要素の語尾に「だよ」を付けるよ。</p> <ul id="target"> <li>1つ目のLI</li> <li>2つ目のLI</li> <li>3つ目のLI</li> <li>4つ目のLI</li> <li>5つ目のLI</li> </ul> <ul> <li><a id="method1">実行</a></li> <li><a id="method2">リセット</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 ; } textarea { font-size: 16px ; width: 100% ; min-height: 60px ; box-sizing: border-box ; } 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() { // 各要素に関数を実行する d3.selectAll( "#target li" ).each( function( d, i ) { // d = [data()]などで要素に関連付けられたデータ // i = インデックス番号 // this = 要素 // 語尾に「だよ」を加える this.textContent += "だよ" ; } ) ; } // クリックイベント2 document.getElementById( "method2" ).onclick = function() { // ulの中身を元に戻す d3.select( "#target" ).html( ulContent ) ; } // ul要素の最初の状態を保存しておく var ulContent = d3.select( "#target" ).node().innerHTML ;

構文

selection = selection.each( function )

引数
項目	説明
function	各要素に対して実行する関数を指定する。この関数は2つの引数をとる。1つ目は、`data()`や`datum()`によって要素に関連付けられたデータ。2つ目は、要素のインデックス番号(d3.selectionオブジェクト内の順番)。そして、関数内部の`this`は、要素(ノード)を参照できる。

戻り値
項目	説明
selection	関数を実行した後のd3.selectionオブジェクトが戻り値となる。