# 餅圖
## 需求
公司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)
