比例尺是一个映射函数,把一个值域映射成一个可视的区域。也就是给一个输入,返回一个输出。这样上一章中的柱形图永远都不会超出可视区域。
## 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')
```
![](https://img.kancloud.cn/a2/3b/a23b121b50f3dfe633af5853193fe75b_506x211.png)
后面还会遇到其他类型的比例尺,最常见的就是时间比例尺。