LoginSignup
109

More than 5 years have passed since last update.

D3.jsを学習する際に見ると良いドキュメント

Last updated at Posted at 2013-08-01

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

という5項目のみがセクション名になるほど大事で、これさえわかってしまえば使えるんだろうなという感覚を持っておくと気が遠くならずに済む。

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/

重要な部分は、enterupdateexitという名前の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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
109