d3.js advent calendar 1日目

これは、d3.js API Advent Calendarの１日目の記事です

d3.js Advent Calendar 1日目
selector api (1/2)

Selector APIとは

DOMの操作(HTMLだけではなくSVGの要素も)はSelector APIを叩いて行う
基本のキ

できること

• DOMの取得
• DOMの追加/削除
• DOMの属性/style/html/textなどのset/get
• data/enterによるデータの操作←ここが肝!
• あとは配列的ななにか(select/filter/sortとか)

2つのselector API

• d3.select
• d3.selectAll

CSS3で定義されているSelectorを指定可能

• tag: div
• class: .awesome
• id: #foo
• attribute: [color=red]
• container: parent child
• logical AND: .this.that
• logical OR: .this, .that

実例

d3.select('div')
 d3.selectAll('p.description')
 d3.select('a[href=http://www.google.com')
 d3.select('.this.that')
 d3.selectAll('.this, .that') 

native にselector APIを持たない行けてない非モダンなブラウザの場合

d3読み込む前にSizzle嫁
Sizzle：jQueryでも使われているdojo由来のSelector API

selector部に指定できる引数

• selector string：当たり前
• event時にthisで渡される要素
• d3.selector APIで取得した要素
• jQueryのDOMエレメント

実例

d3.select($('div.hoge'))

その他にデキること

• selection.filter
• selection.sort
• selection.empty: 空なら真値を返す
• selection.node: 最初の要素を返す
• selection.each: イテレータ
• selection.call: 関数呼び出し

selection.callについて少しだけ

d3.selectAll('div').call(function(selection){selection.attr('name', 'hoge')})
 (function(selection){selection.attr('name', 'hoge')})(d3.selectAll('div')) 

上記2つは同じ意味です