d3.js logo

D3.js version.4を学ぶための学習リソースの紹介。

この記事は「D3.js Advent Calendar 2016」 参加記事です。

D3.jsメジャーバージョンアップ

2016年6月28日に、約4年ぶりとなるメジャーアップデート、D3.js ver.4が公開されました。
ながらく利用されてきたver.3から大幅な変更が行われ、とくに命名規則が大きく変わったため、ver.3のコードはver.4ではほとんど動かなくなっています。

どちらを使うべきか

各種プラグインなどのver.4への移行はだいぶ進んでいるとはいえ、ネット上のドキュメントなどはいまだver.3を対象としたものが多く、また現在出版されている日本語の参考書は全てver.3を元に書かれています。
しかし、ver.4には、ver.3での反省点も含め、アルゴリズムの最適化や、モジュール化、ver.3にはなかった便利な機能が多数追加されているので、個人的にはver.4をお勧めします。
私は、実際にver.4を仕事で使い初めていますが、今の所大きなバグなどもなく問題なく使えているので、その点でも安心できるものになっているのではないかと思います。

そこで、ver.4を学習するためのお勧めリソースを紹介します。

ver.3を使っていた人むけ

命名規則に大きく変更があったとはいえ、基本の思想は変わっていないので、変更点を抑えればほぼver.3と同様に使っていくことができるかと思います。
まずは、公式のchange logを読むのがベストでしょう。

Changes in D3 4.0

細かい所はAPI Referenceを。

D3 API Reference

ver.3からの変更点に関するスライドなどもアップロードされているので、その辺も目を通しておくと参考になります。(私もスライドをあげています。なぜか、背景画像の天地が逆さまになっていて見づらい部分もありますがスルーしてやってください)

D3 V4 – What's new?
細かすぎて伝わらないD3 ver.4の話

初めてD3を学ぶ人向け

ver.3に関してはスコット・マレイ氏の非常にわかりやすいチュートリアルがあったのですが、ver.4では今のところ初学者向けのチュートリアルが非常に少ない状態です。なので、私が見つけたなかから、初めてD3を学習したいかたに向いているんじゃないかと思うものを紹介します。

INTRO TO D3.JS
マレイ氏のチュートリアルに似た感じで、SVGなどの基本的なところから初めて、D3で簡単な棒グラフを表示するまでのチュートリアルです。

D3 in Depth
まだ記事が途中までしか完成していませんが、最初の数ページをみても結構丁寧に説明されているので参考になります。

D3 Tips and Tricks v4.x
本命。ver.3のときに発売され非常に評判の良かったドキュメント「D3 Tips and Tricks」のver.4版です。
シンプルなチャートから初めて、カスタマイズしていく過程を詳しく解説しながら進むチュートリアルで、私が最初にD3を学んだ際に、非常に参考になったドキュメントです。
今の所ver.4を使ったチュートリアルでは、ここが一番ボリュームのある記事だと思うので、ぜひ参考にしてみてください。
寄与モデルとしてe-booksも販売しているので、役に立ったという人はぜひ寄与してください。

https://leanpub.com/d3-t-and-t-v4