■ はじめに

* D3.js について、まとめる

【１】D3.js

* Data Driven Documentの略
* Protovis の後継ライブラリ。
　Protovis については、以下のサイトを参照のこと。

http://mbostock.github.io/protovis/ex/

* 表現には、主に SVG(Scalable Vector Graphics)での描画

１）使用上の注意

* 決してチャート・ライブラリではない
 => JavaScriptでのDOM操作に円・四角などの描画が加わった印象
 => グラフ描画だけでよければ、C3.js で描画した方が楽
　　(C3.js については、以下の関連記事を参照のこと)

 * グラフを書く際に、正の値のみなのか、負の値も含まるかによって、
　実装方法を変えなければならない
 * 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/

より

[a] サイトに
   「<script src="http://d3js.org/d3.v3.js"></script>」
    を追加する
または
[b] 上記の公式サイトからダウンロードしインポートする

使い方

１）基本的な考え方

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

２）主なメソッド

data

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

transition

* アニメーション効果を操作

each

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

* イベントを取得できる

主な属性

transform属性 translate/rotate

* 要素の移動・回転

http://dataisfun.org/2014/05/19/?p=276

仮想領域

update

* 対応する要素が存在する場合(text, styleで操作)

enter

* 対応する要素が足りない場合(append()で対応)

exit

* 対応する要素が余る場合

サンプル

* 面白いが実装大変。。。サンプルと合わせて以下を見てみるといいかも。
* あくまでサンプル。こんだけ書いて、実用はできない見栄え

http://shimz.me/blog/d3-js/3307

* 棒グラフ(初めに作るなら、円グラフの方がハードルが低い)

例

<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>

参考サイト

有名サイト（スコット・マレイ）
http://ja.d3js.info/alignedleft/tutorials/d3/
シンプルなサイト。初めにみておくといいかも
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_20.htm
有名サイト
http://codezine.jp/article/detail/7459
まとまってて見やすい
http://www.techscore.com/blog/2014/12/19/d3-js%E3%81%A7%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E9%AD%85%E3%81%9B%E3%82%8B/
綺麗なサンプル
http://dev.classmethod.jp/ria/d3js/
http://dataisfun.org/
http://blog.scimpr.com/2013/01/19/%E6%B0%97%E3%81%AB%E3%81%AA%E3%82%8Bd3-js%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB/
With Google Map
http://shimz.me/blog/d3-js/3743
地図関連
http://shimz.me/blog/d3-js/2993
http://geoexamples.com/geoexamples/d3js/d3js_electoral_map/pieChartTooltipCode.html
豊富なサンプルがある
http://www.openspc2.org/reibun/D3.js/
http://techslides.com/over-1000-d3-js-examples-and-demos
http://bl.ocks.org/ZJONSSON
With ASP.NET MVC
http://tech.tanaka733.net/entry/d3-js-and-asp-net-mvc-1

D3.js ～凡例を表示する～
D3.js ～目盛を表示する～
D3.js ～ツールチップを表示する～
D3.js ～アニメーション表示する～
https://dk521123.hatenablog.com/entry/2015/10/24/111832
D3.js ～モーダルダイアログを表示する～
D3.js ～グラフをクリアにする～
D3.js / C3.js で改行入れのテキストを表示するには...
D3.js ～配列操作～
D3.js ～ SVG / D3.js のグラフを PNG 画像で保存することを考える～
D3.js ～円グラフを作成する～
D3.js ～折れ線グラフを作成する～
D3.js ～縦棒グラフを作成する～
D3.js ～積み上げ縦棒グラフを作成する～
D3.js ～複合グラフ / 折れ線・縦棒グラフを作成する～
D3.js / TopoJSON / DataMaps [1] ～世界地図を作成する～
D3.js / TopoJSON / DataMaps [2] ～ DataMaps　Plugin編～
D3.js / TopoJSON / DataMaps [3] ～ DataMaps　Custom Plugin編 [1] ～
D3.js / TopoJSON / DataMaps [3] ～ DataMaps　Custom Plugin編 [2] ～
D3.js / TopoJSON / DataMaps [4] ～ DataMaps あれこれ～
D3.js / TopoJSON / DataMaps [5] ～ DataMaps 内で改行入れのテキストを表示するには... ～
C3.js ～入門編～

ASP.NET MVC でグラフを描画することを考える
DOT言語表示ツール～ d3-graphviz ～
https://dk521123.hatenablog.com/entry/2023/06/18/102448
HTML ～ SVG要素～
https://dk521123.hatenablog.com/entry/2015/10/16/232500

プログラムの超個人的なメモ

Memo for Programming.

【JS】D3.js ～入門編～