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 才是转换前的整数的值。

查看在线演示