d3.layout.pie()
在第4章D3 创建SVG里我们讲过 圆弧图 的制作方法,我们需要准备这样的数据才能画出圆弧:
var angle = 2*Math.PI;
var data = [
{
startAngle: 0,
endAngle: 0.2*angle
},
{
startAngle: 0.5*angle,
endAngle: 0.8*angle
}
];
如果都是自己去计算startAngle
或endAngle
,那太繁琐了,这时候就可以用到饼状布局来生成需要的数据。
*千万记住:布局不是要直接绘图,而是为了得到绘图所需的数据。*
饼图(Pie)的API说明
- pie.endAngle -取得或设置饼布局整体的结束角度。
- pie.padAngle - 取得或设置饼布局填充角度。
- pie.sort - 控制饼片段的顺时针方向的顺序。
- pie.startAngle - 取得或设置饼布局整体的开始角度。
- pie.value - 取得或设置值访问器函数。
- pie - 计算饼图或圆环图中弧的开始和结束角度。
我们通过一个制作一个饼状图来讲解饼状布局。
1. 数据
var dataset = [ 30 , 10 , 43 , 55 , 13 ];
2. 数据转换
var pie = d3.layout.pie();
var data = pie(dataset);
通过饼状布局转换数据后,data数据被转换成如下形式:
3. 绘制图形
创建svg容器
var width = 400;
var height = 400;
var outerRadius = 150; //外半径
var innerRadius = 0; //内半径,为0则中间没有空白
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
创建弧形svg生成器
var arc = d3.svg.arc() //弧生成器
.innerRadius(innerRadius) //设置内半径
.outerRadius(outerRadius); //设置外半径
定义颜色比例尺
var color = d3.scale.category10();
定义弧形路径容器
var arcs = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", "translate(" + (width / 2) + "," + (width / 2) + ")");
生成弧形路径并填充颜色
arcs.append("path")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", function(d) {
return arc(d);
});
生成弧形文本并旋转
arcs.append("text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function(d) {
return d.data;
});
arc.centroid(d)
能算出弧线的中心,所以用来放置文本最合适了。
要注意,text() 里返回的是 d.data ,而不是 d 。因为被绑定的数据是对象,里面有 d.startAngle、d.endAngle、d.data 等,其中 d.data 才是转换前的整数的值。