D3.js比例尺 定量比例尺 之 指数比例尺和对数比例尺(v3版本)

上一章给大家介绍了线性比例尺，https://www.cnblogs.com/littleSpill/p/10821332.html

现在给大家介绍一下指数比例尺和对数比例尺。

 

指数比例尺(Power Scale)和对数比例尺(Log Scale) :

 

指数比例尺(Power Scale)和对数比例尺(Log Scale)中很多方法和线性比例尺是一样的，例如domain()、range()、rangeRound()、clamp()、nice()、ticks()、tickFormat()等，名称和作用都是相同的。但是，指数比例尺多一个expoent()，用于指定指数。对数比例尺多一个base()，用于指定底数。两者的用法和原理是一样的，下面以指数比例尺来说明使用方法，代码:

1  //设置指数比例尺的指数为3
2         var pow = d3.scale.pow().exponent(3);
3         console.log(pow(2))         //返回值8
4         console.log(pow(3))         //返回值27
5 
6         //设置指数比例尺的指数为0.5，即平方根
7         pow.exponent(0.5)
8         console.log(pow(2))         //返回值1.4142135623730951
9         console.log(pow(3))         //返回值1.7320508075688772

这样使用的话，效果和JavaScript的Math.pow()是一样的。即为是N次方运算。既然如此，这样的运算为何要指定定义域domain和值域range呢？看代码:

 

1 var pow2 = d3.scale.pow()
2                     .exponent(3)
3                     .domain([0,3])
4                     .range([0,90])
5         console.log(pow2(1.5))       //返回值11.25

 

这段代码输出11.25，指数为3，输入为1.5。可是1.5的3次方为3.375，这是这么计算的呢？ 其实，指数比例尺内部调用了线性比例尺，而且把这个线性比例尺定义域的吧边界变为了其指定次方。 在这段代码中，实际上相当于定义了一个线性比例尺，定义域为[0,27]，值域为[0,90]。当计算1.5的3次方为得到结果3.375之后， 再对这个结果应用线性比例尺，最终得到11.25。(90/27*3.375)，为了验证这一点，请看如下代码:

 

 1 //指数比例尺
 2         var pow3 = d3.scale.pow()
 3                     .exponent(3)
 4                     .domain([0,3])
 5                     .range([0,90])
 6 
 7         //线性比例尺
 8         var linear = d3.scale.linear()
 9                         .domain([0,Math.pow(3,3)])
10                         .range([0,90])
11         
12         console.log(pow3(1.5))                  //返回值11.25
13         console.log(linear(Math.pow(1.5,3)))    //返回值11.25 

 

和预想的一样，最终输出的两个数值相等。指数比例尺的定义域和值域默认都为[0,1]，因此如果不指定的话，和Math.pow()没什么区别。

 

 

下一文章介绍量子比例尺和分位比例尺。