selection.attr - 属性を取得、変更する

投稿日: / 更新日:

d3.jsのselection.attr()は、属性を取得、または変更するためのAPIです。

サンプルコード

<input type="text" width="100">
// input要素を取得
var selection = d3.select( "input" ) ;

// input要素のvalue属性を取得 (第2引数なし)
var attr = selection.attr( "value" ) ;

// value要素に新しく値を指定
selection.attr( "value", "200" ) ;

// value要素を削除
selection.attr( "value", null ) ;

// 値を関数で指定 (戻り値が値となる)
selection.attr( "value", function( d, i ) {
	// d=関連付けられたデータ
	// i=インデックス番号
	// this=要素

	return "設定したい値" ;
} ) ;

デモ

構文

value || selection = selection.attr( name || function [, value || null ] )
引数
項目説明
name対象となる属性名を指定する。名前空間もxlink:hrefというように指定できる。
value省略可。第2引数には新しい値を指定する。
null第2引数にnullを指定した場合、要素から属性を削除する。
function第2引数を関数で指定することもできる。ここで指定した関数は、第1引数に要素に関連付けられたデータ、第2引数にインデックス番号をとる。また、thisで要素を参照できる。戻り値が値として設定される。
戻り値
項目説明
value引数を1つだけ指定して、属性値を取得した時は、属性値が戻り値となる。
selection引数を2つ指定した場合は、d3.selectionオブジェクトが戻り値となる。

ノート

1つなら取得
引数を1つ指定すると値の取得。
2つなら変更
引数を2つ指定すると値の変更。
削除はnull
値にnullを指定すると属性の削除となる。d3ではこれが基本のようだ。
フォーム系要素は？
ラジオボタンやチェックボックスの状態や、テキストエリアの内容を確認したり変更するには、d3.property()を利用する。