グリッドを描く (SVG使用)

説明

D3.jsでグリッドを描くにはd3.range()メソッドとsvgのlineを使います。d3.range()メソッドでグリッドの開始値と終了値、そして間隔を順番にパラメーターとして指定します。次にline要素を使ってグリッドとなる線を生成します。線の座標はd3.range()メソッドで生成した値（配列になっています）から計算します。なお、グリッドを鮮明にするためにはattr("shape-rendering", "crispEdges")を指定しておきます。
グリッドを描画したら、最後に折れ線グラフを描画します。

サンプル [サンプルを実行する]　[サンプルをダウンロード]

HTMLソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js サンプル</title>
<link rel="stylesheet" href="css/main.css">
<style>
	svg { border: 1px solid black; }
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<h1>D3.jsサンプル</h1>
<div id="myGraph"></div>
<script src="js/sample.js"></script>
</body>
</html>

JavaScriptコード

var list = [10, 30, 5, 60, 40, 178, 56, 130, 24, 80];
var svgWidth = 320;	// SVG領域の横幅
var svgHeight = 240;	// SVG領域の縦幅
var step = svgWidth/(list.length-1);	// 折れ線グラフの間隔
// SVGの表示領域を生成
var svg = d3.select("#myGraph").append("svg")
.attr("width", svgWidth).attr("height", svgHeight)
// 折れ線を生成
var line = d3.svg.line()
	.x(function(d, i){ return i * step; })	// 横方向はSVG領域に合わせて調整。データは最低2個あるのが前提
	.y(function(d){ return svgHeight-d; })	// 縦方向は数値そのままでスケール等しない
// 横方向と縦方向のグリッド間隔を自動生成
var rangeX = d3.range(0, svgWidth, 20);
var rangeY = d3.range(0, svgHeight, 10);
// 縦方向のグリッドを生成
svg.selectAll("line.y")
	.data(rangeY)
	.enter()
	.append("line")
	.attr("x1", 0).attr("y1", function(d,i){return d; })
	.attr("x2", svgWidth).attr("y2", function(d,i){return d ;})
// 横方向のグリッドを生成
svg.selectAll("line.x")
	.data(rangeX)
	.enter()
	.append("line")
	.attr("x1", function(d,i){return d;}).attr("y1", 0)
	.attr("x2", function(d,i){return d;}).attr("y2", svgHeight);
// グリッドを描画
svg.selectAll("line")
	.attr("stroke", "black")
	.attr("shape-rendering", "crispEdges");
// 折れ線グラフを描画
svg.append("path")
	.attr("d", line(list))	// 線を描画
	.attr("stroke", "red")	// 線の色を指定
	.attr("stroke-width", 2)	// 線の太さ
	.attr("fill", "none");	// 塗り潰しなし。指定しないと黒色で塗り潰される