# 柱狀圖
## 需求：
公司A業務分布四大板塊：制造,外包,金融,咨詢。其2018年純收入分別是:3120,2056,5754,4632(萬元)。繪制一個柱狀圖來實現數據展示。
如圖這是我在echarts上構建的圖表，接下來我們分析d3如何實現。
## 分析
拆分需要繪制哪些：
1. x軸為板塊
2. y軸為收入值
3. 中心柱狀圖
4. y軸刻度的水平線
根據拆分，我們再次分析：
1. x軸的實現，數值是連續的，所以我們可以使用線性比例尺去實現計算。
2. y軸的實現，按順序的，所以我們可以使用序數比例尺。
3. 中心的柱狀圖比較簡單，通過比例尺計算出位置及長度。繪制rect
4. 通過修改y軸的line從而實現
再細化思路：
1. 首先構建一個svg，確定圖表應該繪制的大小。
2. 分析數據哪個是y軸數據哪個是X軸數據，
3. 計算x，y軸的domain范圍，可以使用d3.max，d3.min，d3.range等等
4. 構建比例尺。
5. 由于坐標軸需要留白，所以使用g標簽通過transform進行移動。之后調用axis，繪制坐標軸。
6. 繪制柱狀圖，創建g標簽通過transform進行移動，讓其正好偏移至繪制區域。
7. 通過data綁定數據，之后創建rect后，其x，y，width，height屬性通過比例尺進行計算。
## 繪制
接下來我們開始繪制：
``` javascript
//創建svg
var svg = d3.select('#root')
.append('svg')
.attr('width', 600)
.attr('height', 600)
.style("background-color","#333");
var margin=[100,100,100,100]
//模擬數據:
var data = [['制造',3120],['外包',2056],['金融',5754],['咨詢',4632]]
//構建y軸的比例尺
var ymax = d3.max(data,function(d){return d[1]})
var y=d3.scaleLinear()
.domain([0,ymax]).range([400,0])
var axisY = d3.axisLeft(y);
var axisYG = svg.append('g')
.attr('class','axisY')
.attr('transform','translate(100,100)')
.call(axisY);
//構建x軸比例尺
var ydomain = data.map(function(d){return d[0]})
//['制造','外包','金融','咨詢']
var x = d3.scaleBand()
.domain(ydomain)
.range([0,400])
.paddingInner(0.1)
.paddingOuter(0.1)
console.log(x.bandwidth(),x.step())
var axisX = d3.axisBottom(x)
var axisXG = svg.append('g')
.attr('class','axisY')
.attr('transform','translate(100,500)')
.call(axisX);
//繪制bar
var left = x.step()
var bar = svg.append('g')
.attr('transform','translate(100,100)')
bar.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('x',function(d){return x(d[0])})
.attr('y',function(d){return y(d[1])})
.attr('width',x.bandwidth())
.attr('height',function(d){return 400-y(d[1])})
```
關于[bar0](https://doter1995.github.io/d3-start-course/bar/bar-0.html)
8. *修改axis生成的比例尺，將刻度線line拉長，并設置為虛線樣式。
``` javascript
axisYG.selectAll('g.tick')
.selectAll('line')
.attr('x1',-5)
.attr('x2',400)
.attr('stroke-dasharray','5, 5');
```
## 實例
美化后的[bar01](https://doter1995.github.io/d3-start-course/bar/bar-01.html)
