<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>饼状图</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
svg {
width: 600px;
height: 600px;
display: block;
margin: 100px auto;
} text {
fill: #fff;
}
</style>
</head>
<body>
<svg></svg>
</body>
</html>
<script>
var svg = d3.select('svg');
var color = d3.scale.category10(); var dataset = [30, 10, 43, 55, 13];
// 这样的值是不能直接绘制图形的，例如绘制饼图的一部分，需要知道一段弧度的起始位置和终止角度，这些值都不存在于数组的dataset中，因此需要用到布局
// 布局的作用就是：计算出适合于作图的数据
var pie = d3.layout.pie();
var piedata = pie(dataset)
console.log(piedata)//5个整数倍转换成了5个对象，每个对象都有：起始角度（startAngle）和终止角度（endAngle），还有原数据（属性名称为 data）。这些都是绘图需要的数据。
// 绘制图形
// 为了根据转换后的piedata绘图，还需要一样工具：生成器
// 弧生成器
var outerRadius = 150;
var innerRadius = 100;
var arc = d3.svg.arc()//弧生成器；
.innerRadius(innerRadius)//设置内半径
.outerRadius(outerRadius)//设置外半径
// 先添加g，再添加path
var arcs = svg.selectAll('g')
.data(piedata)
.enter()
.append('g')
.attr("transform", "translate(200,200)");
// 接下来给每个g添加path
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;
}); </script>