d3.jsの使い方まとめ (サンプルコード付き)

投稿日:2016/03/03 / 更新日:2016/03/03

アイキャッチ画像

d3.js(Data-Driven Documents)の使い方をサンプルコード付きで初心者にも分かるように説明します。

d3.js - Data-Driven Documents: d3.jsの公式ウェブサイト。ライブラリのダウンロード、ドキュメントの確認など。

準備

d3.jsの準備はとても簡単です。ライブラリとなるファイルを事前に読み込むだけです。ライブラリはダウンロードしてもいいし、d3.jsのサーバー上に用意されているものをそのまま利用してもかまいません。1点だけ、script要素で読み込む場合は、charset属性を必ず指定して下さい。

ダウンロードして使う場合

公式ウェブサイトのトップページからダウンロードしたライブラリを、自身のサーバー上にアップロードして読み込みます。

<script src="./d3.js" charset="utf-8"></script>

CDNを使う場合

d3.jsのサーバー上にあるファイルを読み込みます。

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

Selections

d3.jsを利用する上で、最も基本的なAPIを説明していきます。

項目	説明
d3.select	指定したセレクタに一致する一番最初の要素を選択する。
d3.selectAll	指定したセレクタに一致する全ての要素を選択する。
d3.mouse	指定した要素内のマウス位置を取得する。
d3.touch	指定した要素内のタッチ位置を取得する。
d3.touches	指定した要素内の複数のタッチ位置を取得する。
d3.event	d3独自のイベントオブジェクト。
selection.attr	属性値を取得、または変更する。
selection.classed	クラスを持っているかの確認、クラスの付け外し。
selection.style	スタイルのプロパティの値を確認、変更する。
selection.property	フォーム系要素のプロパティの状態を確認、変更する。
selection.text	要素内のテキストを取得、変更する。
selection.html	要素内のHTMLを取得、変更する。
selection.append	要素を一番最後に追加する。
selection.insert	要素を指定した位置に挿入する。
selection.remove	要素を削除する。
selection.data	データを関連付ける。
selection.enter	データの数に対して要素の数が足りない場合、差分のプレースホルダーを作成する。
selection.exit	要素の数に対してデータの数が足りない場合、差分の要素を選択する。
selection.datum	要素に関連付いたデータを取得、変更する。
selection.filter	指定した条件を持つ要素だけに絞り込む。
selection.sort	要素を比較用の関数を元に並び替える。
selection.order	要素をd3.selectionの順番通りに並び替える。
selection.on	イベントを設定する。
selection.transition	d3.selectionの要素にアニメーション効果を与える。
selection.interrupt	アニメーション効果をキャンセルする。
selection.each	各要素に関数を実行する。
selection.call	セレクションに関数を実行する。
selection.empty	セレクションが空か否かを確認する。
selection.node	セレクションから要素を取得する。
selection.size	セレクションに含まれる要素の数を取得する。

Drag Behavior

ドラッグ操作を設定するためのAPIです。

項目	説明
d3.behavior.drag	要素にドラッグ操作を適用するためのコンストラクタ。
drag.on	ドラッグ操作を処理するイベントリスナーを指定する。
drag.origin	ドラッグ操作の原点となる位置座標を指定する。

Zoom Behavior

ズームの操作を設定するためのAPIです。

項目	説明
d3.behavior.zoom	要素にズーム操作を適用するためのコンストラクタ。
zoom.on	ズーム操作を処理するイベントリスナーを指定する。
zoom(selection)	セレクションの各要素にズーム操作を適用する。
zoom.translate	ズーム操作におけるtranslateの値を取得、変更する。
zoom.scale	ズーム操作におけるscaleの値を取得、変更する。
zoom.scaleExtent	ズーム操作におけるscaleの最小値、最大値を取得、変更する。
zoom.center	ズーム操作における計算の中心座標を取得、変更する。
zoom.size	ズーム操作におけるビューポートを指定する。
zoom.x	X方向のスケールを調整する。
zoom.y	Y方向のスケールを調整する。

Colors

色を操作するためのAPIです。

項目	説明
d3.rgb	RGB値を操作するためのインスタンスを作成する。
rgb.brighter	RGB値を明るくする。
rgb.darker	RGB値を暗くする。
rgb.hsl	RGB値をHSL値に変換する。
rgb.toString	RGB値をHexに変換する。
d3.hsl	HSL値を操作するためのインスタンスを作成する。
hsl.brighter	HSL値を明るくする。
hsl.darker	HSL値を暗くする。
hsl.rgb	HSL値をRGB値に変換する。
hsl.toString	HSL値をHexに変換する。
d3.hcl	HCL値を操作するためのインスタンスを作成する。
hcl.brighter	HCL値を明るくする。
hcl.darker	HCL値を暗くする。
hcl.rgb	HCL値をRGB値に変換する。
hcl.toString	HCL値をHexに変換する。
d3.lab	LAB値を操作するためのインスタンスを作成する。
lab.brighter	LAB値を明るくする。
lab.darker	LAB値を暗くする。
lab.rgb	LAB値をRGB値に変換する。
lab.toString	LAB値をHexに変換する。

Pseudorandom Number Generation

擬似乱数を発生させるためのAPIです。

項目	説明
d3.random.normal	正規分布の乱数を発生させる。
d3.random.logNormal	対数正規分布の乱数を発生させる。
d3.random.bates	Bates分布の乱数を発生させる。
d3.random.irwinHall	Irwin–Hall分布の乱数を発生させる。