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

d3.js advent calendar 2日目

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

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

.data(), .datum(), .enter()

2日目は、Event APIと上記3つのd3がdata driven documentと呼ばれる所以たるメソッドを紹介します
selector APIによって取得した(取得予定の)オブジェクトをメソッドチェインでつなぎ、styleや属性などをsetすることができますが、この際のchain methodの値には色や数値といった定数だけではなく、関数を渡すことができます
一連のchain methodにおいて値として使うことのできる関数の引数として引き渡されるのがまさに.data()や.datum()で引き渡された「データそのもの」となります

selector API 2日目

  • event
  • datum
  • data / enter

event

jQueryと同様
.on()の第三引数にはcapture
callback関数の引数には、現在のdatumオブジェクトd, idx
callbackメソッド内でthisはイベントを発生したDOM, eventオブジェクトはd3.eventで取得可能

d3.selectAll('circle').on('click', function(d, idx){}, capture)

実例

d3.selectAll('circle').on('click', function(d, idx){
var x = d3.event.screenX;
var $this = $(this);
$this.attr('hoge', 'fuga');
}, capture)

datum

後述する.data APIとは異なり、datumでは、その後の引数にデータを渡すことが出来る(イテレートされない)
そのためpathデータ作成に使うデータを渡すときなどに使う

実例

d3.select('path')
.datum([{x:1,y:1},{x:2,y:2},{x:3,y:3},{x:4,y:4},{x:5,y:5}])
.attr('d', function(d){
/* ここでdには、datumで指定した配列すべてが来る */
})

data / enter

一番肝となるAPI
これを理解しないとd3やる意味ないレベル
ただし「.data()の前のselectAllってなに?」は、「これから.dataで渡したデータ配列のイテレート結果で作るDOMをこれでフィルターして取得する」くらいの「お作法」として覚えてください

data / enter

d3.selectAll()の後に続いてそれに適用するデータを渡すAPI
d3.jsでは「チェインされ、のちの属性やスタイルなどのgetter/setterに引き渡される」ものは.data()でセットされた「データそのもの」

d3.selectAll('circle')
.data([{x:1,y:2,r:3},{x:3,y:2,r:2}]).enter()
.append('circle')
.attr('cx', function(d){
/* ここのdにdataでセットした配列の要素がいてレートしてくる */
return d.x;
})

まとめ<>/h2>

.data(), .datum(), .enter()はd3のd3たるmethodです。
selectorによって仮押さえし、.data()で引き渡したデータ配列を.enter()で適用し、イテレートでオブジェクトの追加、属性/styleなどのsetを行う際のchain methodにデータそのものが渡され、利用することができる、これこそがdata driven documentそのものだと思います