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

投稿日: / 更新日:

アイキャッチ画像

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

準備

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.eventd3独自のイベントオブジェクト。
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.transitiond3.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.xX方向のスケールを調整する。
zoom.yY方向のスケールを調整する。

Colors

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

項目説明
d3.rgbRGB値を操作するためのインスタンスを作成する。
rgb.brighterRGB値を明るくする。
rgb.darkerRGB値を暗くする。
rgb.hslRGB値をHSL値に変換する。
rgb.toStringRGB値をHexに変換する。
d3.hslHSL値を操作するためのインスタンスを作成する。
hsl.brighterHSL値を明るくする。
hsl.darkerHSL値を暗くする。
hsl.rgbHSL値をRGB値に変換する。
hsl.toStringHSL値をHexに変換する。
d3.hclHCL値を操作するためのインスタンスを作成する。
hcl.brighterHCL値を明るくする。
hcl.darkerHCL値を暗くする。
hcl.rgbHCL値をRGB値に変換する。
hcl.toStringHCL値をHexに変換する。
d3.labLAB値を操作するためのインスタンスを作成する。
lab.brighterLAB値を明るくする。
lab.darkerLAB値を暗くする。
lab.rgbLAB値をRGB値に変換する。
lab.toStringLAB値をHexに変換する。

Pseudorandom Number Generation

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

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