【 D3.js 入门系列 — 4 】 如何使用比例尺（ scale ）

上一章中使用了一个很重要的概念 — 比例尺（ scale ），本节将解说其使用方法。

1. 最大值和最小值

在介绍比例尺（ scale ）之前，先介绍两个经常和比例尺一起出现的函数，在【第3章】中也出现了。

• d3.max()
• d3.min()

这两个函数用于求一个数组中的最大值和最小值，如果是一维数组，使用方法如下：

var dataset = [ 30, 20 , 52 , 2 , 11 ];
var result = d3.max( dataset );

变量 result 中保存的是数组 dataset 的最大值 52。这是一维数组的用法，二维数组的用法如下：

var dataset = [ [ 30 , 20 ] ,
[ 52 , 2 ] ,
[ 90 , 11 ] ];
var result = d3.max( dataset , function(d){
return d[1]; } );

如此，返回的值为 20 ， 因为比较的是 20 ， 2 ， 11 这三个数，最后一行的 d[1] 表示指定每一个数组的第二个值。

2. 比例尺

接下来说明 scale （比例尺）的用法，首先要明确一点： scale 是函数，不错，是函数。

为什么要使用 scale 呢？假设现在要为一个汽车公司做数据可视化，要将每月的汽车销量用柱形图表示，假设这个月有 100 销量，用 100 个像素长度的柱子来表示。下个月 500 销量，用 500 个像素表示，再下个月有 3000 台呢？不可能用3000个像素，浏览器长度也不够。这时候就要用到 scale （比例尺）了。

在 scale 中，给定一个 domain （定义域），给定一个 range （值域） ，即可进行数值之间的转换。

最常用的 scale 是线性函数。它的用法如下：

var scale = d3.scale.linear();
scale.domain([0,20])
.range([0,100]);
var result = scale(10);

d3.scale.linear() 指定使用线性函数的 scale 。后两行指定 scale 的 domain 和 range ，这里分别为 [ 0 , 20 ] 和 [ 0 , 100 ]，如果不指定，它们默认都为 [ 0 , 1 ] 。接下来调用 scale 函数，传了一个参数 10 给它，返回值保存在 result 中。 result 的值为多少呢， 是 50 。它是根据线性函数计算的。要记住， scale 是一个函数。

domain 和 range 最少放入两个数，可以超过两个数，但两者的数量必须相等，如下为放入3个数的情况：

var scale = d3.scale.linear();
scale.domain([0,20,40])
.range([0,100,150]);
var result = scale(30);

这表示有两个线性函数，当输入的值为 30 时，属于 domain （定义域）的 20 – 40 这个范围，那么输出为 100 – 150 这个范围。这里的 30 对应的值为 125 ，所以 result 的值为 125 。

d3.scale.linear() 中还有一些函数，这里介绍两个：

nice() ，改变函数的 domain ，能自动把 0.00000000000001 变为最接近它的 0 ， 9.999999991 变为最接近它的 10
rangeRound() ， 能自动把输出变为最接近它的整数。
调用的时候形如：

scale.domain([0.000000001,9.99999999991])
.range([0,100])
.nice();

上面介绍的是最常用的线性函数的 scale ，其他还有 sqrt ，pow，log，quantize，ordinal 等等各种 scale。 需要的时候可查询官方 API 。