【 D3.js 入门系列 --- 4 】 怎样使用scale（比例）

本人的个人博客为： www.ourd3js.com

csdn博客为： blog.csdn.net/lzhlzz

转载请注明出处，谢谢。

---

在上一节中使用了一个非常重要的概念 — scale （这个不知道翻译成什么，暂且叫它比例）。本节将重点介绍它的相关用法。

在介绍 scale 之前，先介绍两个常常和 scale 一起出现的函数，在上一节中也出现了。

• 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[0]; } );

如此，返回的值为90， 由于比較的是30,52,90这三个数，最后一行的 d[0] 就是指定每个数组的第一个值。

   

    接下来介绍 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。 须要用的时候可到 d3js.org 查询API。