D3.jsとjQueryのセレクションメソッドの違い
本日は小ネタ。
D3.jsのセレクションは、ほぼjQueryのセレクションと似た動作をしますが一部違う部分もあります。
jQueryのセレクションメソッドは基本this(選択した要素のjQueryオブジェクト)を戻り値として返しますが、D3ではappendメソッドを使用した場合、追加された要素のD3セレクションオブジェクトが戻り値となります。
|
1 |
d3.select('body').append('div').append('h1') |
上記スクリプトの実行結果は以下となります。
|
1 2 3 4 5 |
<body> <div> <h1></h1> </div> </body> |
jQueryで無理やり似た構文を書いた場合の実行結果は以下となります。
|
1 |
$("body").append("<div></div>").append('<h1></h1>') |
|
1 2 3 4 |
<body> <div></div> <h1></h1> </body> |
jQueryではセレクション後のメソッドチェーンは、基本メソッドの戻り値が変わることなくセレクタで選択した要素に対して適用される(ここではbody要素)のでD3とは動作が異なります。
D3と同じ結果を求めるには、jQueryでは以下のように入れ子にする必要があります。
|
1 |
$("body").append( $('<div>').append( $('<h1>') ) ) |
|
1 2 3 4 5 |
<body> <div> <h1></h1> </div> </body> |
詳細
d3セレクションのstyleメソッドやattrメソッドで要素を操作する場合、メソッドチェーンの途中で要素が追加(append)されるとその後に実行されるstyleメソッド等の適用先が変わるので注意が必要です。
|
1 2 3 4 5 6 |
d3.select('body') //body要素を選択 .style('background-color', 'black') //body要素にスタイルを適用 .append('div') //div要素を追加、divセレクションを返す。 .style('background-color', 'blue') //div要素にスタイルを適用 .append('h1') //h1要素を追加、h1セレクションを返す .style('background-color', 'red') //h1要素にスタイルを適用 |
また、最終的な戻り値も最後にappendされた要素のセレクションオブジェクトになるので注意してください。
|
1 2 3 4 5 |
var elm = d3.select('body') .append('div') .append('h1'); elm.style('color', 'white'); // h1要素にstyleが適用される |
D3ではメソッドチェーンで実行されるメソッドの順番がかなり重要です。(jQueryではあまり気にしなくてもよい)
ちゃんと説明できた気がしませんが、D3のこの仕様は非常に重要なので覚えておくとD3への理解が進むと思います。
