d3,圆弧 arc，饼图

https://github.com/mbostock/d3/wiki/Pie-Layout 

https://github.com/mbostock/d3/wiki/SVG-Shapes#arc

• arc.centroid - compute the arc centroid.
• arc.cornerRadius - get or set the corner radius accessor.
• arc.endAngle - get or set the end angle accessor.
• arc.innerRadius - get or set the inner radius accessor.
• arc.outerRadius - get or set the outer radius accessor.
• arc.padAngle - get or set the pad angle accessor.
• arc.padRadius - get or set the pad radius accessor.
• arc.startAngle - get or set the start angle accessor.
• arc - generate a solid arc, as in a pie or donut chart.

• d3.svg.arc - 创建弧度生成器.
• arc - 生成一个线性弧度,用于饼图或甜甜圈图.
• arc.innerRadius - 获取或设置内部的半径访问器.
• arc.outerRadius - 获取或设置外部的半径访问器.
• arc.startAngle - 获取或设置起始角度访问器.
• arc.endAngle - 获取或设置结束角度访问器.
• arc.centroid - 计算弧的重心点.

代码：基本数据，[5,6,7]

var w=300;
var h=300;
var dataset=[5,6,7];

pie是饼图的函数

var pie=d3.layout.pie();

初始化svg

var svg=d3.select("body")
		.append("svg")
		.attr("width",w)
		.attr("height",h);
var outRadius=w/2;
var innerRadius=w/4;

var arc=d3.svg.arc()
		.innerRadius(innerRadius)
		.outerRadius(outRadius);
		
var arcs=svg.selectAll("g.arc") //生成和dataset对应的g ,class是arc,数据集有多少个，类有多少个
		.data(pie(dataset)) //pie(dataset)把数据本身进行改变
		.enter()
		.append("g")
		.attr("class","arc")
		.attr("transform","translate("+outRadius+","+innerRadius+")"); //圆心位置

color是d3自带的配色
var color=d3.scale.category10();
arcs.append("path")
.attr("fill",function(d,i){
return color(i);
})
.attr("d",arc);

结果生成了圆环图

以下 是浏览器生成的代码 

pie(dataset)的数据

pie(dataset)
[
Object
data: 5
endAngle: 6.283185307179586
padAngle: 0
startAngle: 4.537856055185257
value: 5
__proto__: Object
, 
Object
data: 6
endAngle: 4.537856055185257
padAngle: 0
startAngle: 2.443460952792061
value: 6
__proto__: Object
, 
Object
data: 7
endAngle: 2.443460952792061
padAngle: 0
startAngle: 0
value: 7
__proto__: Object]

可以看到数据有padAngle,修改以下相应的参数，就有了