1. Examples
まず見るべきなは、実際に動かせる例がたくさん存在するギャラリーページ
https://github.com/mbostock/d3/wiki/Gallery
最初は、上の方にあるのを幾つかクリックして「すごーい」と思えばいい。ただ、実際はちょっと下にある"Basic Charts", "Techniques, Interaction & Animation"という部分のほうが自分で使うとなった場合、参考になるはず。
2. Introduction
次に見るのはIntroductionページ
http://d3js.org/
ここはd3jsのトップページでありながらドキュメントのIntroductionも兼ねている。
...が、ここを読んでも全く使えるようになった気がしない。
ただ、
- Selections
- Dynamic Properties
- Enter and Exit
- Transformation not Representation
- Transitions
という５項目のみがセクション名になるほど大事で、これさえわかってしまえば使えるんだろうなという感覚を持っておくと気が遠くならずに済む。
3. Documentation
次に、Documentationページをチェック
https://github.com/mbostock/d3/wiki
ただ、ここはリンク集みたいになっていて、コンテンツではないことが分かる。
なにか疑問に思った時に、ぱっと自分でコード書いて動かせるようにここでd3.jsのInstallだけしておこう。
4. Tutorial & API Reference
次に見るのは、
チュートリアル一覧ページ
https://github.com/mbostock/d3/wiki/Tutorials
APIリファレンス
https://github.com/mbostock/d3/wiki/API-Reference
のどちらか、というか併用。
チュートリアルは理解しやすいけれど、網羅的に理解するのは不向き。こういうのしか読まないと、ある程度使えるようにはなるけれど、同じ事を行うより良い方法を見逃してしまったりする。
逆にAPIリファレンスは、出来ることの全てが書かれているのでこれさえ把握すれば出来ることを理解しきったと言えるけれども、普通の人間であればこれをそのまま読むのは苦痛なはず。
なのでチュートリアルを読み進めつつ、その時出てきた部分のAPIリファレンスを参照するという。こうすることで、網羅性も確保しつつ、重要なAPIの部分から読んでいくことが可能になる。
Selections / Enter and Exit
D3を使う上で特に大事な、データに追従して要素を作ったり更新したり削除したりする仕組みのチュートリアル
http://bost.ocks.org/mike/join/
重要な部分は、enter、update、exitという名前のvirtual selectorが作成され、それぞれ新規要素、既存要素、削除された要素が入っているという部分
The data method binds data to elements, producing three virtual selections: enter, update and exit. The enter selection contains placeholders for any missing elements. The update selection contains existing elements, bound to data. Any remaining elements end up in the exit selection for removal.
これに伴い、selection.dataのAPIリファレンスを読んでおくと理解も深まる
https://github.com/mbostock/d3/wiki/Selections#wiki-data