selection.text - 要素のテキストを取得、変更する

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

d3.jsのselection.text()は、要素内のテキストを取得、または変更するためのAPIです。JavaScriptのtextContentプロパティがベースとなっています。

サンプルコード

<p>SYNCER</p>

// p要素を取得
var selection = d3.select( "p" ) ;

// p要素のテキストを取得
var textContent = selection.text() ;

// p要素に新しいテキストを指定
selection.text( "value", "RECNYS" ) ;

デモ

RUN
HTML
CSS
JavaScript

下のp要素の中身を操作するよ。 SYNCER <input type="text" value="" readonly="readonly"> <ul> <li><a id="method1">取得</a></li> <li><a id="method2">変更</a></li> <li><a id="method3">リセット</a></li> </ul>

#element { color: #f00 ; } input { font-size: 16px ; height: 60px ; transition: width .3s ; box-sizing: border-box ; width: 100% ; } 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 ; }

// p要素を取得 var selection = d3.select( "#element" ) ; // クリックイベント1 document.getElementById( "method1" ).onclick = function() { // p要素のテキストを取得 var textContent = selection.text() ; // input要素に反映する d3.select( "input" ).property( "value", textContent ) ; } // クリックイベント2 document.getElementById( "method2" ).onclick = function() { // [SYNCER]と[RECNYS]を交互に変更 var newText = selection.text() == "SYNCER" ? "RECNYS" : "SYNCER" ; // value要素に新しく値を指定 selection.text( newText ) ; } // クリックイベント3 document.getElementById( "method3" ).onclick = function() { // テキストを[SYNCER]に selection.text( "SYNCER" ) ; // value要素を空に d3.select( "input" ).property( "value", "" ) ; }

構文

value || selection = selection.text( [ value || function ] )

引数
項目	説明
value	省略可。要素に新しくセットしたいテキストを指定する。省略して引数をなしにした場合は、現在のテキストを取得する。
function	引数に指定する値を、関数にすることもできる。ここで指定した関数は、第1引数に要素に関連付けられたデータ、第2引数にインデックス番号をとる。また、`this`で要素を参照できる。戻り値が値として設定される。

戻り値
項目	説明
value	引数を指定しなかった場合、対象要素内の一番最初のテキストノードの値が戻り値となる。
selection	引数を指定してテキストを変更した場合は、d3.selectionオブジェクトが戻り値となる。

ノート

引数なしなら取得: 引数を指定しない場合はテキストの取得。
引数ありなら変更: 引数を指定した場合はテキストの変更。
最初のテキストノードが対象: あいうえおというように、指定した要素(例の場合はp要素)の中にも要素が含まれている場合、最初のテキストノードが処理の対象となる。例の場合は、あの部分だけが対象となる。
タグを含めたい場合は？: このメソッドは、テキストノードを取り扱うためタグは無効です。タグを含めたい場合はhtml()。