# 音谱图
## 需求
简版：
我们每1秒随机生成12个数字范围是0-100，在柱状图中让它一直动态变化。
## 分析
1. 构建一个数据生成器。
2. 构建比例尺x,y。
3. 构建一个更新绘制。
4. 定时器不断的生成数据更新图表。
## 绘制
``` 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 length = 12 //生成几个柱
//创建颜色比例尺
var color = d3.scaleOrdinal(d3.schemeCategory20);
//构建y轴的比例尺
var y=d3.scaleLinear()
.domain([0,100]).range([400,0])
var x = d3.scaleLinear().domain([0,12]).range([0,400])
function createData(length){
var re=[];
for (let index = 0; index < length; index++) {
var item = Math.random().toFixed(2)*100;
console.log(item)
re.push(item);
}
return re;
}
var barG = svg.append('g')
.attr('class','#barG')
.attr('transform','translate(100,100)')
var t = d3.transition()
.duration(450)//毫秒
.ease(d3.easeLinear);
function updateBar(data){
var rect = barG.selectAll('rect')
.data(data)
rect.exit().remove();
rect.enter()
.append('rect')
.attr('y',100)
.attr('x',function(d,i){return x(i)})
.attr('width',x(1))
.attr('height',function(d){return 400-y(d)})
.attr('fill',function(d,i){return color(i)})//以上属性是为新标签创建
.merge(rect)
.transition(t)
.attr('x',function(d,i){return x(i)}) //以下属性是需要更新的属性
.attr('y',function(d){return y(d)})
.attr('height',function(d){return 400-y(d)})
}
window.setInterval(function(){
var data = createData(length);
updateBar(data);
},500)
```
## 实例
