【JavaScript】D3.js ~ 入門編 ~

D3.js

 * Data Driven Documentの略
 * Protovis の後継ライブラリ。Protovis については、以下のサイトを参照のこと。
http://mbostock.github.io/protovis/ex/
http://www.moongift.jp/2009/04/canvas%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E8%A4%87%E9%9B%91%E3%81%AA%E3%82%B0%E3%83%A9%E3%83%95%E3%82%82%E6%8F%8F%E7%94%BB%E3%81%99%E3%82%8B%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%80%8Cproto/
 * 表現には、主に SVG(Scalable Vector Graphics)での描画

 SVGについては、以下の関連記事を参照のこと。
http://blogs.yahoo.co.jp/dk521123/35463762.html

注意

 * 決してチャート・ライブラリではない
  => JavaScriptでのDOM操作に円・四角などの描画が加わった印象
  => グラフ描画だけでよければ、C3.js で描画した方が楽(C3.js については、以下の関連記事を参照のこと)
http://blogs.yahoo.co.jp/dk521123/35509265.html
 * グラフを書く際に、正の値のみなのか、負の値も含まるかによって、実装方法を変えなければならない
  (以下の関連記事に、その例がある)
http://blogs.yahoo.co.jp/dk521123/35450750.html
 * Google Chromeだと、見えないケースがある
  => Same-origin policyにひっかかるため?

公式サイト

http://d3js.org/

日本語サイト

http://ja.d3js.node.ws/

API リファレンス

https://github.com/mbostock/d3/wiki/API-Reference
以下のように大別されている

 1) Core     :D3.jsの中心的なモジュール
 2) Scales   :尺度に関するモジュール
 3) SVG      :線や、軸、図形を描画するためのモジュール
 4) Time     :時間をもとにした尺度関連のモジュール
 5) Layouts  :複雑なレイアウトをつくるためのモジュール
 6) Geography:地図データを表示するためのモジュール
 7) Geometry :幾何学的な図を作成するためのモジュール

デモ

https://github.com/mbostock/d3/wiki/Gallery

動画

 * 初めに以下のサイトで勉強してみるといいかも。
http://dotinstall.com/lessons/basic_d3js

必要なツール

[1] Textエディタ
[2] ブラウザ

導入方法

http://d3js.org/
より

[1] サイトに
   「<script src="">http://d3js.org/d3.v3.js">」
    を追加する

または

[2] 上記の公式サイトからダウンロードしインポートする

使い方

基本的な考え方

 1) 要素を指定する
 2) その要素に対して、設定・取得する

主なメソッド

* data       : データを結びつける(バインド)

* transition : アニメーション効果を操作
* each       : アニメーションの最初と最後に何かをやりなさいというのを別の命令で実現する

# アニメーションについては、以下の関連記事を参照のこと。
http://blogs.yahoo.co.jp/dk521123/35481724.html
* on         : イベントを取得できる

主な属性

* transform属性 translate/rotate : 要素の移動・回転
http://dataisfun.org/2014/05/19/?p=276

仮想領域

* update : 対応する要素が存在する場合(text, styleで操作)
* enter  : 対応する要素が足りない場合(append()で対応)
* exit   : 対応する要素が余る場合

サンプル

 * 面白いが実装大変。。。サンプルと合わせて以下を見てみるといいかも。
 * あくまでサンプル。こんだけ書いて、実用はできない見栄え
http://shimz.me/blog/d3-js/3307
* 棒グラフ(初めに作るなら、円グラフの方がハードルが低い)
http://blogs.yahoo.co.jp/dk521123/35435961.html
<html>
<body>
<head>
<style>
.axis path, .axis line {
  fill: none;
  stroke: black;
}
.axis text {
  font-size: 11px;
}
</style>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script>
 var arrayData = [32, 5, 36, 22, 12];
 
 var graphAreaWidth = 500;
 var graphAreaHeight = 300;
 var padding = 20;
 
 var xScale = d3.scale.linear()
               .domain([0, d3.max(arrayData)])
               .range([padding, graphAreaWidth - padding])
               .nice();
 
 var graphArea = d3.select("body").append("svg").attr({width: graphAreaWidth, height: graphAreaHeight});
 
 var xAxis = d3.svg.axis()
               .scale(xScale)
               .orient("bottom");
               
 graphArea.append("g")
            .attr({
                class: "axis",
                transform: "translate(0, 180)"
            })
            .call(xAxis);

 graphArea.selectAll("rect")
   .data(arrayData)
   .enter()
   .append("rect")
   .transition()
   .attr({
      x: padding,
      y: function(d, i) {
         return i * 25;
      },
      width: function(d) {
         return xScale(d) - padding;
      },
      height: 20,
      fill: "Blue"
    });
</script>
</body>
</html>



関連記事

構文

D3.js ~ SVG編 ~
http://blogs.yahoo.co.jp/dk521123/35463762.html

共通でやることあれこれ

D3.js ~ 凡例を表示する ~
http://blogs.yahoo.co.jp/dk521123/35474311.html
D3.js ~ 目盛を表示する ~ ~
http://blogs.yahoo.co.jp/dk521123/35564769.html
D3.js ~ ツールチップを表示する ~
http://blogs.yahoo.co.jp/dk521123/35480801.html
D3.js ~ アニメーション表示する ~
http://blogs.yahoo.co.jp/dk521123/35481724.html
D3.js ~ モーダルダイアログを表示する ~
http://blogs.yahoo.co.jp/dk521123/35501040.html
D3.js ~ グラフをクリアにする ~
http://blogs.yahoo.co.jp/dk521123/35504882.html
D3.js / C3.js で 改行入れのテキストを表示するには...
http://blogs.yahoo.co.jp/dk521123/35523904.html
D3.js ~ 配列操作 ~
http://blogs.yahoo.co.jp/dk521123/35536895.html
D3.js ~ SVG / D3.js のグラフを PNG 画像で 保存することを考える ~
http://blogs.yahoo.co.jp/dk521123/35546102.html

グラフ各種

D3.js ~ 円グラフを作成する ~
http://blogs.yahoo.co.jp/dk521123/35435961.html
D3.js ~ 折れ線グラフを作成する ~
http://blogs.yahoo.co.jp/dk521123/35430148.html
D3.js ~ 縦棒グラフを作成する ~
http://blogs.yahoo.co.jp/dk521123/35435053.html
D3.js ~ 積み上げ縦棒グラフを作成する ~
http://blogs.yahoo.co.jp/dk521123/35450750.html
D3.js ~ 複合グラフ / 折れ線・縦棒グラフを作成する ~
http://blogs.yahoo.co.jp/dk521123/35463598.html

地図

D3.js / TopoJSON / DataMaps [1] ~ 世界地図を作成する ~
http://blogs.yahoo.co.jp/dk521123/35443473.html
D3.js / TopoJSON / DataMaps [2] ~ DataMaps Plugin編 ~
http://blogs.yahoo.co.jp/dk521123/35446731.html
D3.js / TopoJSON / DataMaps [3] ~ DataMaps Custom Plugin編 [1] ~
http://blogs.yahoo.co.jp/dk521123/35450674.html
D3.js / TopoJSON / DataMaps [3] ~ DataMaps Custom Plugin編 [2] ~
http://blogs.yahoo.co.jp/dk521123/35549099.html
D3.js / TopoJSON / DataMaps [4] ~ DataMaps あれこれ ~
http://blogs.yahoo.co.jp/dk521123/35500909.html
D3.js / TopoJSON / DataMaps [5] ~ DataMaps 内で 改行入れのテキストを表示するには... ~ 
http://blogs.yahoo.co.jp/dk521123/35524106.html

その他

C3.js ~ 入門編 ~
http://blogs.yahoo.co.jp/dk521123/35509265.html
ASP.NET MVC でグラフを描画することを考える
http://blogs.yahoo.co.jp/dk521123/35406503.html