比例尺是一個映射函數,把一個值域映射成一個可視的區域。也就是給一個輸入,返回一個輸出。這樣上一章中的柱形圖永遠都不會超出可視區域。
## d3.min()
```
var dataset = [1, 1, 2, 3, 5, 8, 13, 21, 34, 55];
d3.min(dataset) //返回數組中最小值
```
## d3.max()
```
var dataset = [[1, 1], [2, 3], [5, 8], [13, 21], [34, 55]];
d3.max(dataset, funtion(d) {
return d[1]; //返回數組中的第2個值
});
```
## d3.extent()
返回一個數組,包含最小值和最大值。
```
var data = [0.243, 0.584, 0.987, 0.153, 0.433];
var extent = d3.extent(data); //返回 [0.153, 0.987]
```
## 線性比例尺
使用`d3.scaleLinear()`創造一個線性比例尺,而`domain()`是輸入域,`range()`是輸出域,相當于將`domain`中的數據集映射到`range`的數據集中。
~~~
let?scale = d3.scaleLinear().domain([1,5]).range([0,100])
~~~
## 再繪柱形圖(帶自動比例縮放功能)
```
var dataset = [1, 1, 2, 3, 5, 8, 13, 21, 34, 55];
var w = 500;
var h = 200;
var padding = 3; //兩個柱形之間的縫隙
var w_bar = (w - padding * dataset.length) / dataset.length; // 柱形的寬度需要去掉縫隙
var yScale = d3.scaleLinear() //建立一個線性比例尺
.domain([0, d3.max(dataset)]) //值域的范圍
.range([0, h]); //映射到可視的區域
d3.select('body').append('svg')
.attr('width', w).attr('height', h)
.selectAll('rect').data(dataset).enter().append('rect')
.attr('x', (d, i) => i * (w_bar + padding))
.attr('y', d => h - yScale(d)) //注意坐標0點在左上角
.attr('width', w_bar)
.attr('height', d => yScale(d)) //高度是映射后的值
.attr('fill', 'teal')
```

后面還會遇到其他類型的比例尺,最常見的就是時間比例尺。