标签：
我个人的博客： www.ourd3js.com
csdn博客为： blog.csdn.net/lzhlzz
转载请注明出处。谢谢。
这一节用 Layout 做一个饼状图。第9节中说过， Layout 的作用仅仅是转换数据，将不适合图形化的数据转化成适合图形化的数据。如今使用下面数据：
var dataset = [ 30 , 10 , 43 , 55 , 13 ];
var pie = d3.layout.pie();一定要记住，这是一个函数，使用它的时候。要 pie( dataset ) 这样才转换数据。我们能够先看看转换后输出什么样的数据。
如上图所看到的，5个整数被转换成了5个 Object ，每一个里面存有起始角度和结束角度，以及原整数。
这种数据适合做饼状图。这就是 Layout 的作用。可是要注意。实际作图时，还是须要别的作图方法的。
我们可用做弧线的方法来作饼状图，由于弧线有粗细，调整粗细就能变成饼状图，以下我们加入例如以下代码：
var outerRadius = width / 2; var innerRadius = width / 4; var arc = d3.svg.arc() .innerRadius(innerRadius) .outerRadius(outerRadius);outerRadius 和 innerRadius 是弧线的外半径和内半径，width 是 svg 绘制框的宽度， outerRadius - innerRadius 就是弧线的粗细。
然后我们定义一个弧线的函数 arc ，并把内外半径传给它。要注意 arc 也是一个函数。
接下来能够作图了，和前几节一样，都是在 svg 框内作图。上面的有5个整数，也就是有5段弧线。我们先在 svg 里加入5个分组（ 也就是 svg 中的元素 g ）。每个分组就是一段弧线。代码例如以下：
var arcs = svg.selectAll("g")
.data(pie(dataset))
.enter()
.append("g")
.attr("transform","translate("+outerRadius+","+outerRadius+")"); 上面的代码中，我们绑定了转换后的数据 pie(dataset) 。有5个数据。所以会加入5个g元素。最后一行代码是移动元素的位置，默认的起始位置是 svg 绘制框的 (0,0) 坐标，也就是左上角。要注意，这个时候上面代码返回的是同一时候选择5个g元素的选择。
接下来对每一个g元素，加入 path 。
arcs.append("path")
.attr("fill",function(d,i){
return color(i);
})
.attr("d",function(d){
return arc(d);
}); 由于 arcs 是同一时候选择5个g元素的，所以 append("pah") 后，是每个 g 中都有 path 。然后再加入颜色属性，和路径属性。颜色属性的 color(i) 是定义的一个函数。
var color = d3.scale.category10();SVG 中的路径属性是 d， 它的值是 arc(d) 。也就是将绑定的数据作为上面定义的函数 arc 的參数算出的值。
接下来在每个弧线中心加入文本。
arcs.append("text")
.attr("transform",function(d){
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor","middle")
.text(function(d){
return d.value;
}); arc.centroid(d) 能算出弧线的中心，要注意一句代码。返回的是 d.value ，而不是 d。由于当前绑定的数据是 Object。里面有起始角度等值，d.value 是元整数的值。可见上面的截图。
好了，看看结果图吧。
完整代码例如以下：
<html>
<head>
<meta charset="utf-8">
<title>Pie</title>
</head>
<style>
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = 600;
var height = 600;
var dataset = [ 30 , 10 , 43 , 55 , 13 ];
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height);
var pie = d3.layout.pie();
var outerRadius = width / 2;
var innerRadius = width / 4;
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
var color = d3.scale.category10();
var arcs = svg.selectAll("g")
.data(pie(dataset))
.enter()
.append("g")
.attr("transform","translate("+outerRadius+","+outerRadius+")");
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.value;
});
console.log(dataset);
console.log(pie(dataset));
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/mengfanrong/p/5021162.html
