JavaScript
d3.js
グラフ
d3.v5.js

D3.jsはバージョンに気をつけて

More than 1 year has passed since last update.

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軸の線を定義


v3

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



v4とv5

var axisTop = d3.axisTop();



例)属性の変更


v3

d3.select("svg")

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


v4とv5

d3.select("svg")

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

思ったより違いがはっきりしていますよね。上記はあくまで一例になります。

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

slideshare - 細かすぎて伝わらないD3 ver.4の話

また、Githubのリポジトリ→GallaryからD3.jsのサンプルを閲覧することができますが、

参考にする際、読み込んでいるD3.jsのバージョンに注意してください。


勉強方法、実現方法の探し方

基本的には、Gallaryからやりたいことと同じ動作をするサンプルコードを見つけ、

それを参考に実装していく形で大丈夫と思いますが、

色々な要素(ズーム+ツールチップ+etc...)を組み合わせて実装したい場合、

D3.jsの機能をある程度勉強しておく必要があります。

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

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

更新日も2018/04/02となっておりますので、最新情報と言っても過言でないと思います。

※2015/05時点の情報です


ライセンス

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

ライセンスはGitHub記載されている通り、修正BSDライセンスになります。

ライセンス表記さえしておけば、問題なく商用利用可能です。

修正BSDライセンスをわかりやすく解説されているサイトがありましたので、

興味がありましたら、一読してみてください。


おわり

簡単ですが、以上になります。

余裕あれば、技術メモの記事も載せたいと思います。