selection.classed - クラスを確認、変更する

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

d3.jsのselection.classed()は、要素が指定したクラスを持っているか否かを確認したり、要素のクラスを外したり付けたりするためのAPIです。

サンプルコード

<p class="aaa bbb ccc">SYNCER</p>

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

// [bbb]というクラスを持っているか確認
var hasClass = selection.classed( "bbb" ) ;

// [aaa]と[bbb]という2つのクラスを持っているか確認 (複数指定)
var hasClass = selection.classed( "aaa bbb" ) ;

// [bbb]というクラスを外す
selection.classed( "bbb", false ) ;

// [bbb]というクラスを付ける
selection.classed( "bbb", true ) ;

// [aaa]を付け、[bbb]を外す (複数指定)
selection.classed( { "aaa": true, "bbb": false } ) ;

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

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

デモ

RUN
HTML
CSS
JavaScript

<p><code>.aaa{ color: red }</code>を操作しよう。</p> <p id="element" class="aaa">SYNCER</p> <ul> <li><a id="method1">[.aaa]を持ってる？</a></li> <li><a id="method2">[.aaa]を付ける</a></li> <li><a id="method3">[.aaa]を外す</a></li> </ul>

.aaa { color: red ; } 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 ; } code { background: #f2f2f2 ; }

// p要素を取得 var selection = d3.select( "#element" ) ; // クリックイベント1 document.getElementById( "method1" ).onclick = function() { // [aaa]というクラスを持っているか確認 var hasClass = selection.classed( "aaa" ) ; // 自身のテキストに反映 this.textContent = "[.aaa]を持ってる？→" + hasClass ; } // クリックイベント2 document.getElementById( "method2" ).onclick = function() { // [.aaa]を付ける selection.classed( "aaa", true ) ; } // クリックイベント3 document.getElementById( "method3" ).onclick = function() { // [.aaa]を外す selection.classed( "aaa", false ) ; }

構文

value || selection = selection.classed( object || name [, value || function] )

引数
項目	説明
name	対象のクラス名を指定する。複数指定するには、半角スペース( )で区切る。順番は無視される。持っているかの確認の場合、複数指定すると、OR条件ではなく、AND条件となります。第2引数に`false`を指定して外す場合、複数指定すると、存在しないクラスは無視され、存在するクラスだけが外されます。
value	省略可。`true`を指定するとクラスが付与され、`false`を指定すると外される。二重に付けられることはない。また、存在しないクラスを外そうとしてもエラーにならずスルーされる。
function	第2引数に指定する値を、関数にすることもできる。ここで指定した関数は、第1引数に要素に関連付けられたデータ、第2引数にインデックス番号をとる。また、`this`で要素を参照できる。戻り値が値として設定される。
object	複数のクラスを指定して、一括で`true`、または`false`を指定するのではなく、`.aaa`は`true`、`.bbb`は`false`というように処理を分けたい場合、第1引数にオブジェクトリテラルで値を指定します。`{ "aaa": true, "bbb": false }`というように値を指定しましょう。

戻り値
項目	説明
value	引数を1つだけ指定して、クラスを持っているか否かを確認した場合はBoolean値が返る。持っている場合は`true`、持っていない場合は`false`。
selection	引数を2つ指定した場合は、d3.selectionオブジェクトが戻り値となる。

ノート

1つなら確認: 引数を1つ指定するとクラスを持っているか否かの確認。
2つなら変更: 引数を2つ指定するとクラスの付け外し。
クラスを外すならfalse: クラスを外すならfalse、クラス属性自体を外すならattr()を利用する。
一括じゃないならオブジェクト: クラスによって付けたり、外したり、違う処理を振り分けるには、第1引数にオブジェクトリテラルで値を指定する。
複数の確認はAND条件: 複数のクラスを指定して、持っているか否かを確認する場合はAND条件になり、指定した全てのクラスを持っていないとtrueにはならない。
重複の心配なし: 同じクラスを何回付けても、class="aaa aaa aaa"のようにはならない。
外す時は存在なしでもいい: class="aaa bbb"に対してaaa ccc dddを外そうとすると、aaaだけが外れる。エラーは起こらない。