selection.node - セレクションからnodeを取り出す

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

d3.jsのselection.node()は、d3.selectionオブジェクトに含まれる一番最初の要素(ノード)を取得するためのメソッドです。d3.selectionオブジェクトはまとまりなので、例えば、textContent、innerHTMLといったJavaScript本来のプロパティでアクセスできませんが、このnode()を使って要素を取り出すことで、アクセスできるようになります。

サンプルコード

<p>ターゲットの要素</p>

<ul>
	<li>ターゲットの要素1</li>
	<li>ターゲットの要素2</li>
	<li>ターゲットの要素3</li>
	<li>ターゲットの要素4</li>
</ul>

// p要素を選択する
d3.selectAll( "p" )

// 要素を取得する (<p>ターゲットの要素</p>)
.node() ;

// 全てのli要素を選択する
d3.selectAll( "li" )

// 要素を取得する (<li>ターゲットの要素1</li>)
.node() ;

デモ

RUN
HTML
CSS
JavaScript

<p><code>d3.selectAll( "li" ).node().style.color = "red"</code>を実行するよ！</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() { // 全てのli要素を選択 d3.selectAll( "#target li" ) // 一番最初の要素(ノード)を取得 .node() // 文字色を変更する .style.color = "red" ; } // クリックイベント2 document.getElementById( "method2" ).onclick = function() { // 全てのli要素を選択 d3.select( "#target" ).html( ulContent ) ; } // ul要素の最初の状態を保存しておく var ulContent = d3.select( "#target" ).node().innerHTML ;

構文

node = selection.node()

戻り値
項目	説明
node	d3.selectionオブジェクトに含まれる、一番最初の`null`ではない要素が戻り値となります。要素がない場合は`null`が戻り値となります。