[d3.js][JavaScript]selectorについて

d3.jsを使うにあたってまずは、selectorを理解したい。

<p class="hoge"></p>
<p class="hoge"></p>
<p id="foo"></p>

上のhtmlがあった場合、下のように選択することができる。

d3body = d3.select 'body'
d3hoge = d3.select '.hoge'
console.log d3hoge

d3hogeAll = d3.selectAll '.hoge'
console.log d3hogeAll

d3foo = d3.select '#foo'
console.log d3foo

selectAllとselectの違いは、class名でselectを使った場合、最初にヒットしたオブジェクトを選択してくれるのに対して、selectAllは全部を返してくれるところ。

jQueryだとデフォで全部を選んでくれるのでこの辺の使い方を気をつけたいですね。