selection.datum - 要素に関連付いたデータの取得、変更

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

d3.jsのselection.datum()は、要素に関連付けられているデータを確認したり、要素に新たにデータを関連付けるためのメソッドです。

サンプルコード

<p>関連付けたい要素</p>

// p要素を選択
var selection = d3.select( "p" ) ;

// p要素にデータを関連付ける (引数あり)
selection.datum( "データがあるよ" ) ;

// 要素に関連付けられたデータを取得する (引数なし)
var data = selection.datum() ;

デモ

RUN
HTML
CSS
JavaScript

<p><code>datum()</code>を使って、あらかじめ3個目のli要素にだけデータを関連付けました。その後、各li要素に<code>function(d){ return d }</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 ; }

// 最初に実行する関数 var initial = function () { // li要素の3個目を選択 var selection = d3.select( "#target li:nth-child(3)" ) ; // 3個目の要素にデータを関連付ける selection.datum( "ここだけデータがあるよ" ) ; } ; // クリックイベント1 document.getElementById( "method1" ).onclick = function() { // ul要素を選択 var selection = d3.selectAll( "#target li" ) ; // テキストを変更していく selection.text( function( d, i ) { // データがある場合だけ、データを戻り値にする return d ? d : "データなし…" ; } ) ; } // クリックイベント2 document.getElementById( "method2" ).onclick = function() { // ul要素を元に戻す d3.select( "ul" ).html( ulContent ) ; // 初期化関数を実行 initial() ; } // ul要素の中身をリセット用にキャッシュしておく var ulContent = d3.select( "ul" ).node().innerHTML ; // 最初に初期化関数を実行 initial() ;

構文

data || selection = selection.datum([value])

引数
項目	説明
value	省略可。関連付けたいデータの値を指定する。文字列でもいいし、オブジェクト型でも配列でもかまわない。省略した場合は関連付けられているデータの取得となる。

戻り値
項目	説明
data	引数を指定しなかった場合、対象要素に関連付けられているデータが戻り値となる。データが存在しない場合は`undefined`が戻り値となる。
selection	引数を指定してデータを関連付けた場合、対象要素を含んだd3.selectionオブジェクトが戻り値となる。

ノート

引数なし: 引数がない場合は、関連付けられたデータの取得。
引数あり: 引数がある場合は、新しくデータを関連付ける。
データなしはundefined: データを関連付けてない要素に対して、引数なしのdatum()を実行した場合、undefinedが戻り値となる。