d3入門

基本

1- 要素を指定する

• 単数指定：select
• 複数指定 : selectAll
• 要素追加 : append

2- 設定や取得

https://github.com/d3/d3/wiki/API-リファレンス

• text： テキスト
• attr：属性の指定

d3 V3 CDN

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

Develop Server

python -m SimpleHTTPServer 8888 & php -S localhost:3000

---

d3実装基本

要素指定

d3.select("body").selectAll("p").text("Hello From D3");

d3で body要素 > 単一選 p要素 > 全選択

CSS連結

// 選択要素の変数化
var cont = (".cont p");
// select要素（セレクション）の変数化
var contSelect = d3.select("body").selectAll(cont);

/*
  // 普通の書き方
  contSelect.text("hello from d3!");
  p.style("font-size", "28px");
*/
// 宣言した select要素 に対して連結しつつスタイルを当てる
contSelect.text("hello from d3!")
  .style({
    "font-size": "28px",
    "color": "teal "
  });

---

値の取得

alert(contSelect.style("color"));

値の変更

contSelect.style("font-size", function() {
    return ("30px");
});
p.style("color", function() {
    return ("green");
});

---

バインド（データの結びつけ）

// データのセット 配列
var dataset = [12, 24, 36];

// ターゲットselect設定
var p = d3.select("body").selectAll("p");

• p要素に対して dataset を 「バインド」する > p.data(dataset) : data関数(取得データ)
• .text()でバインドするデータを表示させたい
• 関数：.text(function(d) { })を使う
• 引数 d を使う（決まった引数では無い）

p.data(dataset).text(function(d) {
  return d;
});

// 引数を２つ使う / ２番目の引数 > i = 要素順
p.data(dataset).text(function(d, i) {
    return (i + 1) + "番目は" + d + "です";
});

---

参照

Selections

• d3.event - インタラクションのためのユーザイベントへアクセス
• d3.select - 現在のドキュメントから一つの要素を選択
• d3.selectAll - 現在のドキュメントから複数の要素を選択
• d3.selection - selection プロトタイプの拡張、もしくはインスタンス型のテスト
• d3.touch - 指定されたコンテナに対する相対タッチ位置を取得
• selection.append - 新しい要素の作成と追加
• selection.attr - 属性値の取得と設定
• selection.call - 現在の selection を渡しての関数呼び出し
• selection.classed - CSS クラスの追加と削除
• selection.data - データと要素の対応づけを伴う、要素のグループに対するデータの設定と取得
• selection.datum - データと要素の対応づけを伴わない、個々の要素に対するデータの設定と取得
• selection.each - 選択された要素それぞれに対する関数呼び出し
• selection.empty - selection が空の場合 true を返す
• selection.enter - 存在しない要素のためのプレースホルダを返す
• selection.exit - 不必要になった要素を返す
• selection.filter - データに基づいた selection の絞り込み
• selection.html - 要素の innnerHTML プロパティの設定と取得
• selection.insert - 要素が存在するようになる前の新しい要素の作成と挿入
• selection.interrupt - 現在の transition に対する即時割り込み
• selection.node - selection 中の最初の要素を返す
• selection.on - インタラクションのためにイベントリスナの追加と削除
• selection.order - ドキュメント中の要素を selection に合うように並べ替える
• selection.property - 未加工プロパティの取得
• selection.remove - ドキュメントからの要素の削除
• selection.select - 選択された要素それぞれから一つの子要素を選択
• selection.selectAll - 選択された要素それぞれから複数の子要素を選択
• selection.size - selection 中の要素の数を返す
• selection.sort - データに基づいたドキュメント中の要素のソート
• selection.style - スタイルプロパティの設定と取得
• selection.text - 要素の textContent プロパティの設定と取得
• selection.transition - 選択された要素の遷移を開始