13
Help us understand the problem. What are the problem?

posted at

updated at

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

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のバージョンに注意してください。

Tips

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

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

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

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

修正BSDライセンス

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

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

Why not register and get more from Qiita?
  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
Sign upLogin
13
Help us understand the problem. What are the problem?