D3.js レイアウト – Arcでアーチ形を作る

Share

D3にはPath要素の形を作るための、ジェネレータがいくつかあります。d3.svg.arc()を使うと、アーチ形のpathデータを作ることができます。
作ったpathデータをpath要素のd属性として設定すると、それが描かれます。

基本形は下のようになります。

var arc = d3.svg.arc()
	.innerRadius(80)
	.outerRadius(100)
	.startAngle(1)
	.endAngle(3);
  • innerRadius() = 内側の半径
  • outerRadius() = 外側の半径
  • startAngle() = アークが始まる角度
  • endAngle() = アークが終わる角度

ただし、この角度はラジアンになります。つまり180度がラジアンでは3.14のπ、360度が6.28のπ*2になります。

実際にpathを作る時は、下のようにpathの属性dにarc関数を入れます。なぜこうするかは、複数のアークを作るときに分かります。

svg.append("path")
	.attr("d", arc);

 

基本的なアーク

結果:

d3レイアウト-arc1
画像をクリックすると実際のページが開きます

コード:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>

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

	<script>
		var width = 560,
		height = 400;

		var svg = d3.select("body").append("svg")
		.attr("width", width)
		.attr("height", height);

		var center = svg.append("g")
			.attr("transform", "translate(" + (width/2) + "," + (height/2) + ")");

		var r = 200;
		var p = Math.PI * 2; // ラジアンでの360度。ラジアンでは半円の角度はパイ。

		// arcのpathジェネレータの設定をする。
		var arc = d3.svg.arc()
			.innerRadius(r-40)
			.outerRadius(r)
			.startAngle(p)
			.endAngle(p-2); 
 
			// pathのd属性にarcで作ったpathデータを入れる。
		center.append("path")
		.attr("d", arc);

	</script>

</body>
</html>

解説:
これは基本的なアークです。
var p = Math.PI * 2;で360度をラジアンで表現しています。
外側の半径にouterRadius(r)のようにrを入れ、内側の半径はinnerRadius(r-40)のようにrから引いた値を使っています。

// arcのpathジェネレータの設定をする。
var arc = d3.svg.arc()
	.innerRadius(r-40)
	.outerRadius(r)
	.startAngle(p)
	.endAngle(p-2);

 

複数のアークを作る

データを使って複数のアークを作ります。さらにアークごとに属性を変えてみます。
データごとに属性を変えるには、具体的な値を入れる代わりに、functio(d){}を使って、データが入った時にどうするかをあらかじめ決めておきます。
たとえば下の例では、内側半径のinnerRadiusにデータdを入れ、r-dにするように設定しています。

var arc = d3.svg.arc()
	.innerRadius(function(d){ return r-d;})
	.outerRadius(100)
	.startAngle(1)
	.endAngle(3);

実際にpathを作る時はpath側にデータをバインドします。

var data = [30,90,140];

svg.selectAll("path").data(data).enter()
.append("path")
.attr("d", arc);

このとき1の例と違うのは、arcにデータが来るたびに、function(d){}の中に取り入れて設定どおりに値を出すことです。

では実際の例です。

結果:

d3レイアウト-arc2
画像をクリックすると実際のページが開きます。

コード:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>

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

	<script>
		var width = 460,
		height = 400;

		var svg = d3.select("body").append("svg")
		.attr("width", width)
		.attr("height", height);

		var center = svg.append("g").attr("transform", "translate(" + (width/2) + "," + (height/2) + ")");

		var data = [30,90,140];

		var r = 80;
		var p = Math.PI * 2; // ラジアンでの360度。ラジアンでは半円の角度はパイ。
		var color10 = d3.scale.category10();

		// arcの部分でfunction(d)を設定すると、pathのdで読み込んだ時に、データをこれにしたがって処理する。
		var arc = d3.svg.arc()
			.outerRadius(function(d){ return r+d}) // データごとに外側半径を変える。
			.innerRadius(r)
			.startAngle(function(d,i){ return i+1;})// データのインデックス+1の角度からスタート
			.endAngle(function(d,i){ return p -(i+1); }); // 360度からデータのインデックス+1を引いた角度で終わる。

		center.selectAll("path").data(data).enter()
			.append("path")
			.attr("d", arc)
			.attr("fill",function(d){ return color10(d); });//データごとに色を変える。
		</script>

</body>
</html>

解説:
この例では、データやデータのインデックスを使って、outerRadius、startAngle、endAngleを変えています。

// arcの部分でfunction(d)を設定すると、pathのdで読み込んだ時に、データをこれにしたがって処理する。
var arc = d3.svg.arc()
	.outerRadius(function(d){ return r+d}) // データごとに外側半径を変える。
	.innerRadius(r)
	.startAngle(function(d,i){ return i+1;})// データのインデックス+1の角度からスタート
	.endAngle(function(d,i){ return p -(i+1); }); // 360度からデータのインデックス+1を引いた角度で終わる。

さらにpathを作る部分でデータごとに色も変えています。

center.selectAll("path").data(data).enter()
	.append("path")
	.attr("d", arc)
	.attr("fill",function(d){ return color10(d); });//データごとに色を変える。

結果的に彫刻のような変わった形ができました。


コメントを残す