D3.jsを勉強し始めた際、
バージョンの部分ではまったポイントがありました。
自分と同じくD3.jsを使い始める方を対象に情報共有したいと思います。

はじめに

本題に入る前に、D3.jsってなんぞや？ってところをざっくり触れていきたいと思います。

詳しいことは、以下の記事で解説されています。

自分は、D3.jsを学び始めるまで、グラフ描画のためのライブラリと勘違いしていました。
あくまで、SVG・canvasの描画するためのライブラリということを、
上記記事から理解することができました。

JSのグラフ系ライブラリ

D3.js以外にも結構あるんです。
Qiitaにて、すでにまとめられている記事がありました。
割と最新めな記事を以下に抜粋しましたので、一読いただければ幸いです。

また、Highchartsについては、情報とか特化した記事を書いてますので、
興味がありましたら合わせて読んで見てください。

見出し通りですが、C3.jsというグラフ描画に特化したライブラリも登場していますので、
紹介だけしておきますね。公式ページは下記になります。

D3.jsの現在(2018/05時点)のバージョンはv5になりますが、
v3→v4で大きくAPIの名前や関数の使い方などの見直しが入りました。

抜粋するとこんな違いがあります。

var axisTop = d3.svg.axis().orient("top");

v4とv5

var axisTop = d3.axisTop();

d3.select("svg")
  .axis({
    "data-sample1": "1",
    "data-sample2": "2"
  });

v4とv5

d3.select("svg")
  .axis("data-sample1", "1")
  .axis("data-sample2", "2");

思ったより違いがはっきりしていますよね。上記はあくまで一例になります。
バージョン違いのことについて、詳しく解説してくださっているスライドがありましたので、展開しますね。

また、GitHubのリポジトリ→GallaryからD3.jsのサンプルを閲覧することができます。
参考にする際、読み込んでいるD3.jsのバージョンに注意してください。

基本的には、Gallaryからやりたいことと同じ動作をするサンプルコードを見つけ、
それを参考に実装していく形で大丈夫と思いますが、
色々な要素（ズーム＋ツールチップ＋etc...)を組み合わせて実装したい場合、
D3.jsの機能をある程度勉強しておく必要があります。

自分は、勉強する際に以下のサイトを利用させていただきました。

タイトル通り、v4v5でのD3.jsの使い方の記事を投稿されています。

ついでにライセンスについて触れて起きたいと思います。

ライセンスはGitHub記載されている通り、修正BSDライセンスになります。
ライセンス表記さえしておけば、問題なく商用利用可能です。