データ駆動型のドキュメント

D3.js は、データに基づいてドキュメントを操作するためのJavaScriptライブラリです。 D3は、HTML、SVGとCSSを使ってデータを取り込むことができます。また、「強力な視覚化コンポーネント及びDOM操作、データ駆動型のアプローチ」を組み合わせて提供します。

このスニペットをコピーすると、最新のリリースに直接リンクすることが出来ます。

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

#はじめに

D3 は、ドキュメントオブジェクトモデル（DOM）に任意のデータをバインドしてから、ドキュメントにデータ駆動型の変換を適用することができます。例えば、数字の配列からHTMLテーブルを生成するために、D3を使用することができます。または、スムーズなトランジションや相互作用、対話型のSVG棒グラフを作成するために、同じデータを使用しています。

#セレクション

W3CのDOM APIを使用して文書を修正することは面倒です。
段落要素のテキストの色を変更する例:

var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
  var paragraph = paragraphs.item(i);
  paragraph.style.setProperty("color", "white", null);
}

D3は、 selections(選択肢)と呼ばれるノードの任意のセット上で動作し、宣言的なアプローチを採用しています。例えば、次のように上記のループを書き直すことができます。

d3.selectAll("p").style("color", "white");

必要に応じ、個々のノードを操作することができます。

d3.select("body").style("background-color", "black");

セレクタは、W3CのセレクタAPIによって定義され、モダンブラウザでネイティブにサポートされています。古いブラウザのための下位互換性は Sizzleによって提供されています。上記の例はそれぞれ、タグ名 ("p" 、 "body")でノードを選択しています。

#動的プロパティ

驚くほど強力な機能例

d3.geo.path機能 … SVGパスデータに地理的座標を投影

ランダムに段落を着色

d3.selectAll("p").style("color", function() {
  return "hsl(" + Math.random() * 360 + ",100%,50%)";
});

偶数と奇数のノードに対してグレーを交互に色合い

d3.selectAll("p").style("color", function(d, i) {
  return i % 2 ? "#fff" : "#eee";
});

データは、配列の値として指定され、それぞれの値は、選択関数の最初の引数（ d ）として渡されます。

動的にフォントサイズを計算

d3.selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
    .style("font-size", function(d) { return d + "px"; });

#Enter と Exit

D3の enter と exit でデータ選択すると、入力データに対して新しいノードを作成したり、不要な出力ノードを削除したりすることができます。

データ選択にバインドされると、データ配列内の各要素は、選択中の対応するノードと対になっています。データよりも少ないノードが存在する場合、余分なデータ要素は、入力した選択範囲に追加することでインスタンス化することができ、これにenterデータ選択を形成します。
1.selectAllでp要素指定
2.enter指定しているため、対応する要素が足りない場合、enter領域が自動作成される
3.appendでp要素以下を子要素として追加

d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
  .enter().append("p")
    .text(function(d) { return "I’m number " + d + "!"; });

対応する要素がある場合は、デフォルトでupdate処理します。対応する要素が余った場合は、exitで取得し、removeで削除します。

// Update…
var p = d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
    .text(String);

// Enter…
p.enter().append("p")
    .text(String);

// Exit…
p.exit().remove();

#トランジション

ページ背景を黒色フェードする例:

d3.select("body").transition()
    .style("background-color", "black");

シンボルマップの円のサイズを変更する例:

d3.selectAll("circle").transition()
    .duration(750)
    .delay(function(d, i) { return i * 10; })
    .attr("r", function(d) { return Math.sqrt(d * scale); });