ここでは、d3.jsの使い方及び、折れ線グラフ（ステップライングラフ）のつくり方を纏めてみました。
１、d3.jsについて
D3.jsはデータに基づいてDocumentを操作するためのJavaScritpライブラリで、SVG(※)を作成します。
D3はHTML/SVG/CSSを使って、Googleアナリティクスみたいなグラフを作成することができます。
マウスオーバーとかクリックで任意のデータをDOMと結合させ、データ表示することもできます。
（Data-Driven な DOM 操作手順(頭のDを取って、D3というみたいです)）。
※SVG（スケーラブル・ベクター・グラフィックス）
SVG はテキストベースの画像フォーマットです。
簡単なマークアップコードの記述だけで指定でき、SVG コードを直接 HTML ドキュメント内に記述することもできます。
実際に、小さな青い円を表示する場合、次のように記載すれば、ブラウザで表示できます。
<svg width="50" height="50">
<circle cx="25" cy="25" r="22"
fill="blue" stroke="gray" stroke-width="2"/>
</svg>
・商用利用可能
・豊富なサンプル、ドキュメント
・インタラクティブなグラフの作成
・アニメーション
・jQueryライクなセレクタ(ドットによるメソッドチェイン)
⇒メソッドチェインが可能
２、TypeScriptでのd3.jsを使う
Visual Studio 2015を使って、TypeScript + d3.jsを使用します。
D3ライブラリとD3定義ファイル(d3.d.ts)をダウンロードして、VisualStudioに追加する。
(1) D3のライブラリ
D3公式サイトからダウンロード。
(2) D3の型定義ファイル
DefinitelyTypedからD3の型定義ファイルd3.d.tsをダウンロード。
このファイルがあるとVisual Studio上でD3を使用するときにメソッド名等々を補完してくれます。
(3) Visual Studioでプロジェクトの作成及び、D3ライブラリの配置
TypeScriptのプロジェクトを作成し、D3のライブラリを配置します。
d3フォルダを作成(例:project-folder)して、d3.jsを保存します。
（d3.d.tsも同様）
【d3ファイル】 ・project-folder/d3/d3.jsd3.min.js （必要な場合）・project-folder/d3/
※d3.jsファイルのサイズを小さくし、読み込み時間を速くするために通常版から空白文字を除去したバージョンです。どちらを使っても機能に変わりありません。
【d3定義ファイル】 ・project-folder/d3/d3.d.ts
【HTMLファイル】project-folder/d3/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="d3/d3.v3.js"></script>
</head>
<body>
<script type="text/javascript">
// ここに D3 スクリプトを書きます
</script>
</body>
</html> あとは、body内に、d3を使ってグラフを記述します。
(1)～(4)までの手順は、以下のサイトを参照して、実行してみると良いです。
https://xnn.sakura.ne.jp/blog/2015/03/using_d3-js_with_typescript/
３、折れ線グラフのつくり方
下のステップライングラフのつくり方について説明いたします。
ここでは、以下について説明します。
・データの扱い方
・線データ（ステップライン）の作成
・アニメーション
・イベント処理（マウスオン）
・情報表示 ・軸（スケール）
(1)データ
Xに日付、Yに値を設定したデータを作成します。
日付はDate型に変換します。
※Date型にしないと、グラフがうまく作れなかったので注意
var parseDate = d3.time.format('%Y/%m/%d').parse;
var data = [
{ date: "2015/03/01", value: -2518914 },
{ date: "2015/04/01", value: -2182314 },
{ date: "2015/05/01", value: -2019494 },
{ date: "2015/06/01", value: -1701534 },
{ date: "2015/07/01", value: -1548854 },
{ date: "2015/08/01", value: -1437104 },
{ date: "2015/09/01", value: -138463 },
{ date: "2015/10/01", value: 1000587 },
{ date: "2015/11/01", value: 1000587 },
{ date: "2015/12/01", value: 1000587 }
];
data.forEach(function (d : any) {
d.date = parseDate(d.date);
d.value = d.value;
});
(2)線データ（ステップライン）の作成
idは、HTMLファイルdivタグ要素とします。
idにｓｖｇ要素を追加します。
widthは幅、marginは余白、heightは高さを表します。
var svg = d3.select(id).append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
svgにdataを使って線要素を作成します。
classはlineとして、CSSファイルにlineの属性定義を行います。
1秒で透過アニメーションを設定します。(transiton,durationを使用する)
svg.append('path')
.datum(data)
.attr('class', 'line' )
.attr('d', line0)
.attr('opacity', '0')
.transition()
.duration(1000)
.attr('opacity', '2.0');
線要素に点列を追加します。
classはcircle0にして、CSSファイルにlineの属性定義を行います。
on('mouseover',)で、#tooltipに情報表示します。
on("mouseout")で、情報表示を非表示にします。
0.1秒ごとに、透過アニメーションを設定します。(transiton,durationを使用する)
svg.selectAll('circle.t')
.data(data)
.enter()
.append('circle')
.attr('cx', function (d, i) {
return x(d.date);
})
.attr('cy', function (d, i) { return y0(d.value); })
.attr('r', 0)
.attr('class', 'circle0')
.style('stroke', 'black')
.on('mouseover', function (d) {
$('#tooltip').fadeIn();
$('#date').text(d.date);
$('#value').text(d.value);
})
.on("mouseout", function (d, i) {
$('#tooltip').fadeOut();
})
.transition()
.delay(function (d, i) {
return (i + 1) * 100;
})
.duration(1000)
.attr('r', 6);
線データを定義します（interpolateにて、ステップライン設定します）
var line0 = d3.svg.line()
.x(function (d: any) { return x(d.date); })
.y(function (d: any) { return y0(d.value); });
line0.interpolate("step-after");
(3) スケール・軸
d3.time.scale()を使って、スケール定義します。
スケール定義することで、height/width内にデータが収まるように、スケールできるようになります。
d3.svg.axis()を使って、軸を作成して、スケールとリンクさせます。
var x = d3.time.scale() .range([0, width]);
var y0 = d3.scale.linear().range([height, 0]);
d3.svg.axis()を使って、軸を作成して、スケールとリンクさせます。
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
.ticks(d3.time.months, 1)
.tickFormat(d3.time.format('%Y/%m/%d'));
var yAxisLeft = d3.svg.axis()
.scale(y0)
.orient("left")
.innerTickSize(-width)
.outerTickSize(0)
.tickPadding(10);
x.domain(d3.extent(data, function (d) { return d.date; })).nice();
y0.domain([d3.min(data, function (d) { return Math.min(d.value); }), d3.max(data, function (d) { return Math.max(d.value); })]).nice();
nice()を使うと、値の範囲を丁度良い幅に設定してくれます。
X軸、y軸を追加します。
classはaxisにして、CSSファイルに軸の属性定義を行います。
svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(0,' + height + ')')
.attr('fill', 'rgba(0,0,0,0.85)')
.call(xAxis);
svg.append('g')
.attr('class', 'axis')
.attr('fill', 'rgba(255,0,0,0.85)')
.call(yAxisLeft);
横方向のグリッド間隔を自動生成します。
classはglineにして、CSSファイルにグリッド線の属性定義を行います。
var rangeY = d3.range(0, height, 50);
svg.selectAll('line')
.attr('class', 'gline')
.attr("stroke-width", 1)
.attr("stroke-dasharray", "1, 3")
.attr("shape-rendering", "crispEdges");
塗り潰し領域を生成します。
classはlareaにして、CSSファイルにグリッド線の属性定義を行います。
var area = d3.svg.area()
.x(function (d : any, i) { return x(d.date) })
.y0(function (d: any, i) { return y0(d.value); })
.y1(function (d, i) { return height; });
area.interpolate("step-after");
svg.append("path")
.attr("d", area(data))
.attr('class', 'larea')
.attr("opacity", 0.2);
※「円グラフ」「棒グラフ」については、 別の投稿にて、説明いたします。
(4) 情報表示
tooltipというidにて、div要素を作成します。
(2)で説明したように、on('mouseover',)で点列上にマウスがのった時にtooltipを表示させて、情報表示します。
var tag: string =
"<div id='tooltip'>" +
"<p> <strong id='date'> </strong></p>" +
"<p>値: <span id='value'> </span></p>" +
"</div>";
$(id).append(tag);
【参考URL】
http://ja.d3js.info/alignedleft/tutorials/d3/
http://tech-sketch.github.io/graph-d3js/
http://blog.okazuki.jp/entry/2014/02/08/230843
http://blog.okazuki.jp/entry/2014/02/09/161540
http://blog.okazuki.jp/entry/2014/02/09/212419
⇒プログラミングの一連の流れを書いてあるサイト
https://xnn.sakura.ne.jp/blog/2015/03/using_d3-js_with_typescript/
⇒TypeScriptを使ったd3.jsについて詳しく書かれているサイト
https://d3js.org/
⇒公式サイト
http://dataisfun.org/series/d3-tutorial-elemental
http://ja.d3js.node.ws/
https://github.com/mbostock/d3/wiki/Gallery
⇒サンプル（こんなことができるよ、って）
http://dotinstall.com/lessons/basic_d3js
http://dotinstall.com/lessons/basic_svg
⇒最初は、「ドットインストール」で動画をみて学習するといいと思います。
http://www.openspc2.org/reibun/D3.js/
⇒細かい説明が書かれているサイト
0 件のコメント:
コメントを投稿