# 柱状图
## 需求：
公司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)
