Documents)の使い方をサンプルコード付きで初心者にも分かるように説明します。Documentsd3.jsの公式ウェブサイト。ライブラリのダウンロード、ドキュメントの確認など。Generation準備d3.jsの準備はとても簡単です。ライブラリとなるファイルを事前に読み込むだけです。ライブラリはダウンロードしてもいいし、d3.jsのサーバー上に用意されているものをそのまま利用してもかまいません。1点だけ、script要素で読み込む場合は、charset属性を必ず指定して下さい。公式サイトでライブラリをダウンロードする公式ウェブサイトのトップページからダウンロードしたライブラリを、自身のサーバー上にアップロードして読み込みます。charset="utf-8"></script>CDNを使う場合d3.jsのサーバー上にあるファイルを読み込みます。charset="utf-8"></script>Selectionsd3.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セレクションに含まれる要素の数を取得する。Behaviorドラッグ操作を設定するためのAPIです。説明d3.behavior.drag要素にドラッグ操作を適用するためのコンストラクタ。drag.onドラッグ操作を処理するイベントリスナーを指定する。drag.originドラッグ操作の原点となる位置座標を指定する。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に変換する。Generation擬似乱数を発生させるためのAPIです。説明d3.random.normal正規分布の乱数を発生させる。d3.random.logNormal対数正規分布の乱数を発生させる。d3.random.batesBates分布の乱数を発生させる。d3.random.irwinHallIrwin–Hall分布の乱数を発生させる。スポンサーリンクTwitterFacebookGoogle+はてブpocketLINE更新履歴2016年3月3日コンテンツを公開しました。Arai足立区竹ノ塚在住の男。ウェブとラーメンが大好きです。@arayutwこのブログについてSYNCERシンカーはSYNC(同期)とER(する者)で「知識や感動を同期するブログ」という意味の造語です。みなさんと共に進化(しんか)していきたいという思いも込めてます。Reserved.https://syncer.jp/一番上に戻る。