D3.js 基本5 – Axisで軸を表示して散布図を作る

このページは"D3.jsチュートリアル"シリーズの5 / 20です。

軸を表示すると、グラフらしくなります。軸を作るにはd3.svg.axis()を使います。これとd3.scaleを組み合わせることで、軸と散布図がうまく一致します。
まずHTMLの全コードと結果です。今回はstyleタグを使ってスタイルも変えています。

結果:

x-y軸付きの散布図
x-y軸付きの散布図

コード:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<!-- 軸の属性を決めている。特にfill:none;にしないと真っ黒になる。-->
	<style>
		.axis text {
		  font: 10px sans-serif;
		}

		.axis path,
		.axis line {
		  fill: none;
		  stroke: #000;
		  stroke-width: 2;
		  shape-rendering: crispEdges;
		}
	</style>
</head>
<body>

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

	<script>

// 軸の分も表示されるように、マージンを作っておく。
var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 700 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// transfromでマージンの分だけ位置をずらしている。
var svg = d3.select("body").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 + ")");

var gdp = [
			{年: 2007, gdp: 524, 増減: "up"},
			{年: 2008, gdp: 518, 増減: "down"},
			{年: 2009, gdp: 490, 増減: "down"},
			{年: 2010, gdp: 512, 増減: "up"},
			{年: 2011, gdp: 510, 増減: "down"},
			{年: 2012, gdp: 517, 増減: "up"},
			{年: 2013, gdp: 525, 増減: "up"}
			];

var xScale = d3.scale.linear()
				.domain([2007,2014])
				.range([0,width]);

var yScale = d3.scale.linear()
				.domain([480,530])
				.range([height,0]);

var colorCategoryScale = d3.scale.category10();

// 軸を設定する。
var xAxis = d3.svg.axis()
			    .scale(xScale)
			    .orient("bottom")
			    .tickSize(6, -height) // 棒の長さと方向。
				.tickFormat(function(d){ return d+"年"; }); // 数字に年をつけている。

var yAxis = d3.svg.axis()
				.ticks(5) // 軸のチックの数。
			    .scale(yScale)
			    .orient("left")
			    .tickSize(6, -width);

svg.selectAll("circle")
	.data(gdp)
	.enter()
	 .append("circle")
	 .attr("r",10)
	 .attr("fill", function(d){ return colorCategoryScale(d["増減"]); })
	 .attr("cx", function(d){ return xScale(d["年"]); })
	 .attr("cy", function(d){ return yScale(d["gdp"]); });

// gの中でyAxisをcallして、y軸を作る。
svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
    .append("text")
      .attr("y", -10)
	  .attr("x",10)
      .style("text-anchor", "end")
      .text("GDP(兆円)");	

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);		 

	</script>

</body>
</html>

解説:
前回作ったのと同じデータと散布図に、xとyの軸をつけたものです。
以下で詳しく解説します。
まずはscriptタグの中から見ていきます。

 

マージンを作る:

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 700 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// transfromでマージンの分だけ位置をずらしている。
var svg = d3.select("body").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 + ")");

上の部分は若干複雑ですが、グラフの左と下に軸を表示するためにマージンを作って、widthとheightをマージンの内側に移動しています。この部分はグラフを作るときによく使うので、テンプレートとしてどこかに保存して、いつでも使えるようにしておくと便利です。

 

x軸とy軸の設定:

var xAxis = d3.svg.axis()
			    .scale(xScale)
			    .orient("bottom")
			    .tickSize(6, -height) // 棒の長さと方向。
				.tickFormat(function(d){ return d+"年"; }); // 数字に年をつけている。

上の部分でx軸を設定しています。これにはd3.svg.axis()を使います。
.scale()にはcircleを作るのに使ったのと同じスケール、xScaleを入れます。
.orient(“bottom”)で目盛に表示される2007年などの文字を、軸の下に表示すると決めます。topにすると、目盛や文字が軸の上の部分に表示されます。
.tickSize(6,-height)は、6が軸から出る目盛りの長さ、-heightが一番外側の囲み線の長さです。たとえばもし6を-6にすると目盛が上方向になります。またもし-heightを100にすると、外の枠線が下方向に100だけ伸びます。
.tickFormat()は目盛の文字に使うフォーマットです。x軸は年なので、数字に年をつけるようにしています。

次にy軸の設定をしています。

var yAxis = d3.svg.axis()
				.ticks(5) // 軸のチックの数。
			    .scale(yScale)
			    .orient("left")
			    .tickSize(6, -width);

x軸とほぼ同じですが、違う部分もあります。
.tick(5)で、目盛の数を5にしています。
y軸なので、.scale()にyScaleを入れています。
orient()にはleftを入れています。これで目盛の方向が左になっています。
tickSize()には-widthが使われていて、上側の囲み線がwidth分伸びています。

 

x軸とy軸を表示する:

軸を実際に作成するには、g要素にcall()でxAxisなどを呼び出します。

svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
    .append("text")
      .attr("y", -10)
	  .attr("x",10)
      .style("text-anchor", "end")
      .text("GDP(兆円)");	

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

gを作った後、.call(xAxis)で呼び出しています。これでg要素の中に軸が作られます。
y軸はGDPのことなので、call(yAxis)の後にappendでテキストを追加しています。これがy軸の説明になります。
x軸の場合は、gを移動してから軸を作っています。これはx軸がグラフの下に作られるためです。y座標は上が小さく下が大きくなるので、height分だけ下に移動してx軸を作っています。
transfromとtranslateでの移動はまた後のチュートリアルで説明します。

 

軸のスタイルをととのえる:

htmlファイルのstyleタグで、軸のスタイルを設定しています。
もし何もスタイルを決めていない場合は下のように真っ黒になってしまうことがあります。

fill: none;がない場合。
fill: none;がない場合。

黒くならないためには、最低限fill:none;で塗りつぶしをなしにしないといけません。

<style>
	.axis text {
	  font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	  fill: none;
	  stroke: #000;
	  stroke-width: 2;
	  shape-rendering: crispEdges;
	}
</style>

こうすると、背景の塗りつぶしがなくなって、グラフの中のcircle要素が見えるようになります。
実際のファイルはリンク先においてあります:
5-1axis_scatter.html


コメントを残す