D3.js使い方入門 #d3.js

株式会社スマートドライブでフロントエンドエンジニアをしている@takanoripです。
アドベントカレンダー２回めの登場です。

前回はフロントエンド関係ない話だったので、今回はフロントエンドっぽい話をしたいと思います。

ということで、今回はD3.jsの使い所について書きます。
昨日のアドベントカレンダーで十八番奪われそうとか書かれてましたが、大丈夫です。奪いません。

D3.js

D3.jsはデータに基づいてドキュメントを操作するためのJavaScriptライブラリです。
D3は"Data Driven Document"の略です。

ドキュメントやチュートリアルは下記のサイトなどを見ると良いでしょう。

フロントエンド界隈の人であれば名前は聞いたことはあると思いますが、一体何に使えば良いのかわからない！！って人多いんじゃないでしょうか？
僕も最初は「でーたびじゅあらいぜーしょん…？」みたいな感じでした…
今回は一体何に使えるのかを具体的な例とともに紹介します。

何に使えるのかの前にD3のいいところを紹介します。

D3はjQueryと同じようにメソッドチェーンを使って書くことができるので、jQueryを書いたことがある人はすんなり始められると思います。
JSONを読み込む場合は下記のように書きます。

d3.json("test.json", (data)　=> {
  console.log(data);
});

DOM操作もjQueryを同じように書けます。

draw(num) {
  d3.select('#test')
    .selectAll('svg')
    .data([items[num]])
    .enter()
    .append('svg')
    .call(chart);
}

D3は配列を操作する関数がたくさんあって便利です。
APIドキュメントにまとまっているので、詳しくはそちらを参照してみてください。
https://github.com/d3/d3/blob/master/API.md#arrays-d3-array

D3の大きな特徴として、要素にデータをバインドしていることが挙げられます。上の例ではdataを使ってsvg要素にデータをバインドしています。
要素にデータが紐付いているので、データの値や種類に応じて動きやスタイル変えることができます。
また要素の反復にも強いです。

D3は、チャート専用ライブラリでは表現できない複雑なチャートを表現することができます。D3の用途として一番考えられるのもこれですね。

弊社サービスの管理画面では自動車の加速度を表すチャートがあり、そのモックなどはD3を使って構築しています。サクッと動くものが作れるのでとても重宝しています。
（Reactとの相性があまり良くないのでプロダクトでは使っていません。）

最近某転職マッチングサービスでよく見るこのゲージもD3で作ることができます。

分子図のようなものも作れます。

OrgoShmorgo

ライブラリがあるらしいです。
http://www.reactd3.org/

有名なライブラリはないみたいですね。
組合せて使ってる記事がちらほらありました。
https://bl.ocks.org/lorenzopub/02ccce43d708919ca7c0b242fe1c93f2

Vueも仮想DOMを使っているので自前実装は気を使いそうです。