今回は、PieChartを書いてみました。
これを参考に、少し動きを付けてみることに。
サンプルはこちら。
まずは、svgの描写範囲と、外円の半径と内円の半径をまとめて指定しておきます。svgの領域を設定して、transformで、グラフが描写範囲の真ん中に来るようにしてます。
1 2 3 4 5 6 7 8 9 10 |
var width = 960, height = 500, oRadius = 200; iRadius = 0; var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); |
arc()は、D3で用意された関数です。ここに指定した半径を入れていきます。innerRadiusを大きくすると、ドーナツ型のグラフになりますね。
1 2 3 |
var arc = d3.svg.arc() .outerRadius(oRadius) .innerRadius(iRadius); |
ここでjsonの読み込みです。
ちなみにjsonの中身は、こんな感じ。
1 2 3 4 5 6 7 |
[ {"name":"aaa", "value":55, "color":"#4E64A6"}, {"name":"bbb", "value":44, "color":"#03A688"}, {"name":"ccc", "value":33, "color":"#F2BE22"}, {"name":"ddd", "value":22, "color":"#F29D35"}, {"name":"eee", "value":11, "color":"#D94343"} ]; |
jsonを読み込んでから、データの中身のvalueを指定してあげます。
1 2 3 4 |
d3.json("data.json",function(errer,data){ var pie = d3.layout.pie() .sort(null) .value(function(d) { return d.value; }); |
ここからが描写の記述です。
パスとテキストをまとめて処理するために、グループを作っておきます。
1 2 3 4 5 |
var g = svg.selectAll(".fan") .data(pie(data)) .enter() .append("g") .attr("class", "fan") |
パスは、jsonの中で書いているカラーを読み込みます。
そして、transitionで、動きを付けてみました。1秒間で、0°から360°まで動くようにしています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
g.append("path") .attr("d", arc) .style("fill", function(d) { return d.data.color; }) .attr("stroke", "#fff") .transition() .duration(1000) .attrTween("d", function(d){ var interpolate = d3.interpolate( { startAngle : 0, endAngle : 0 }, { startAngle : d.startAngle, endAngle : d.endAngle } ); return function(t){ return arc(interpolate(t)); } }); |
テキストは、真ん中に来るようにtext-anchorで指定してあげるのがポイントのようです。
1 2 3 4 5 6 |
g.append("text") .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) .style("text-anchor", "middle") .style("fill", "#fff") .text(function(d) { return d.data.name; }); }); |
以上!
こんな感じのチャートが表現できると、応用が効きそうだな。
コメントは受け付けていません。