Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

https://github.com/mbostock/d3/wiki/SVG-Shapes

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away