# 饼图
## 需求
公司A业务分布四大板块：制造,外包,金融,咨询。其2018年纯收入分别是:3120,2056,5754,4632(万元)。绘制一个饼图来实现数据展示。
## 分析
绘制思路：
1. 通过d3.pies将数据进行处理成适合绘制的数据
2. 通过d3.arc来绘制
此处不再赘述关于d3.pie处理的数据。具体请回到使用布局绘制图表查看
## 绘制
``` javascript
//创建svg
var svg = d3.select('#root')
.append('svg')
.attr('width', 600)
.attr('height', 600)
.style("background-color","rgb(142, 137, 137)");
var margin=[100,100,100,100]
//模拟数据:
var data = [['制造',3120],['外包',2056],
['金融',5754],['咨询',4632]]
var dataSet=data.map(function(d){return d[1]})
console.log(dataSet)
//处理数据得到适合绘图数据
var pie = d3.pie().value(function(d){return d[1]})(data)
//构建绘制器
var arc = d3.arc()
.innerRadius(0)
.outerRadius(100)
var arc1 = d3.arc()
.innerRadius(0)
.outerRadius(120)
//构建颜色比例尺
var color = d3.scaleOrdinal(d3.schemeCategory10)
//创建path，并绘制
var arcGroup = svg.append('g')
.attr('transform','translate(300,300)')
.selectAll('path')
.data(pie)
.enter()
arcGroup
.append('path')
.attr("fill", function (d, i) { return color(i) })
.attr("d", arc)
.on('mouseenter',function(d){
d3.select(this).attr('d',arc1(d))
})//鼠标移入增大其选中的半径
.on('mouseleave',function(d){
d3.select(this).attr('d',arc(d))
})//鼠标移出还原其选中的半径
.append('title').text(function(d){
return d.data[0];
})//创建tooltip
```
如上代码如果制作环图只需要修改arc的内径innerRadius为空心的半径即可，此处不做代码实例，建议动手尝试。
## 实例
[pies0](https://doter1995.github.io/d3-start-course/pies/pies-0.html)
