D3.jsを勉強し始めた際、
バージョンの部分ではまったポイントがありました。
自分と同じくD3.jsを使い始める方を対象に情報共有したいと思います。
はじめに
本題に入る前に、D3.jsってなんぞや？ってところをざっくり触れていきたいと思います。
- JavaScriptで作成された、SVG・canvasの描画するためのライブラリ
- JQueryのようにセレクタ指定での操作が可能
- 昨今だと、データ可視化（グラフとか）のために使用されていることが多い
詳しいことは、以下の記事で解説されています。
自分は、D3.jsを学び始めるまで、グラフ描画のためのライブラリと勘違いしていました。
あくまで、SVG・canvasの描画するためのライブラリということを、
上記記事から理解することができました。
JSのグラフ系ライブラリ
D3.js以外にも結構あるんです。
Qiitaにて、すでにまとめられている記事がありました。
割と最新めな記事を以下に抜粋しましたので、一読いただければ幸いです。
また、Highchartsについては、情報とか特化した記事を書いてますので、
興味がありましたら合わせて読んで見てください。
D3.jsを元にグラフ描画に特化したライブラリ「C3.js」
見出し通りですが、C3.jsというグラフ描画に特化したライブラリも登場していますので、
紹介だけしておきますね。公式ページは下記になります。
本題
バージョン
D3.jsの現在(2018/05時点)のバージョンはv5になりますが、
v3→v4で大きくAPIの名前や関数の使い方などの見直しが入りました。
抜粋するとこんな違いがあります。
例）目盛りが上方向に表示されるX軸の線を定義
var axisTop = d3.svg.axis().orient("top");
var axisTop = d3.axisTop();
例）属性の変更
d3.select("svg")
.axis({
"data-sample1": "1",
"data-sample2": "2"
});
d3.select("svg")
.axis("data-sample1", "1")
.axis("data-sample2", "2");
思ったより違いがはっきりしていますよね。上記はあくまで一例になります。
バージョン違いのことについて、詳しく解説してくださっているスライドがありましたので、展開しますね。
slideshare - 細かすぎて伝わらないD3 ver.4の話
また、GitHubのリポジトリ→GallaryからD3.jsのサンプルを閲覧することができます。
参考にする際、読み込んでいるD3.jsのバージョンに注意してください。
Tips
勉強方法、実現方法の探し方
基本的には、Gallaryからやりたいことと同じ動作をするサンプルコードを見つけ、
それを参考に実装していく形で大丈夫と思いますが、
色々な要素（ズーム＋ツールチップ＋etc...)を組み合わせて実装したい場合、
D3.jsの機能をある程度勉強しておく必要があります。
自分は、勉強する際に以下のサイトを利用させていただきました。
タイトル通り、v4v5でのD3.jsの使い方の記事を投稿されています。
修正BSDライセンス
ついでにライセンスについて触れて起きたいと思います。
ライセンスはGitHub記載されている通り、修正BSDライセンスになります。
ライセンス表記さえしておけば、問題なく商用利用可能です。