# 音譜圖
## 需求
簡版：
我們每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)
```
## 實例
