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

查看在线演示