読者です 読者をやめる 読者になる 読者になる

d3.js advent calendar 1日目

d3 javascript adventcalendar

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

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つは同じ意味です