D3.js レイアウト – パイチャートを作る

Share

パイチャートは、データの数字が大きいほど円周が長くなるビジュアライゼーションです。データ全体を合わせると円をぐるりと360度回ることになります。
それには、D3.js レイアウト – Arcでアーチ形を作ると同じように、d3.svg.arc()でアークを作ることになります。
d3.laytout.pie()はアークを作るのではなく、データをパイチャート用のデータに変換してくれるレイアウト関数です。これにデータを入れると、d3.svg.arc()でパイチャートを作るためのデータに変換してくれます。

たとえば下のようにデータを入れて、どう変換されるかを見ます。

var data = [10,50,80];
var pie = d3.layout.pie()
.value(function(d) { return d;});
console.log(pie(data));

そうすると以下のように、データごとにstartAngleとendAngleがつけられます。この角度の幅はデータの数字が大きいほど大きくなり、全体では円周を一周するようになっています。

[{"data":10,"value":10,"startAngle":5.834386356666759,"endAngle":6.283185307179586},{"data":50,"value":50,"startAngle":3.5903916041026207,"endAngle":5.834386356666759},{"data":80,"value":80,"startAngle":0,"endAngle":3.5903916041026207}]

ところでd3.svg.arc()はstartAngleとendAngleを取って、それを左端と右端の角度としてアークを描きます。
つまり、このpieで変換したデータを使ってアークを描けばパイチャートができることになります。
では具体的な例です。

単純なパイチャート:

結果:

クリックすると実際のページが開きます。
クリックすると実際のページが開きます。

コード:

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

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

  var width = 960,
  height = 700;

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

  var data = [10,50,80];
  var r = 300;

  var color = d3.scale.ordinal()
  .range(["red","green","orange"]);

	//startAngleとendAngleは設定しない。
	var arc = d3.svg.arc()
	.innerRadius(200)
	.outerRadius(r);

  // pieはデータを取って、data / value / startAngle / endAngle のオブジェクトを作る。
  // スタートとエンドが被らないように、さらに全体が360になるようにマッピングしてくれる。
  var pie = d3.layout.pie();

  svg.selectAll("path").data(pie(data)).enter() // pie(data)で変換している。
  .append("path")
  .attr("d", function(c){ return arc(c);}) // arcはstartAngleとendAngleのオブジェクトがあれば自動で取る。
  .attr("fill",function(d) { return color(d.data); }); 

 </script>

 </body>
 </html>

解説:
パイレイアウトの準備は以下のように一行だけで済みます。

var pie = d3.layout.pie();

下のように、アークを作るd3.svg.arc()には、startAngleとendAngleは設定していません。これはpie()で変換したデータからとるからです。

var arc = d3.svg.arc()
.innerRadius(200)
.outerRadius(r);

次にpathにデータをバインドするところで、.data(pie(data))とパイ変換したデータを入れています。
このデータをarcが使っています。
ついでにデータごとに色も変えています。

svg.selectAll("path").data(pie(data)).enter() // pie(data)で変換している。
.append("path")
.attr("d", function(c){ return arc(c);}) // arcはstartAngleとendAngleのオブジェクトがあれば自動で取る。
.attr("fill",function(d) { return color(d.data); });

このように、パイチャートはフォーマットが決まっているので、作るのはとても簡単です。


コメントを残す