D3.js比例尺定量比例尺之指数比例尺和对数比…

2019-05-08 07:27:02来源：博客园阅读 ()

上一章给大家介绍了线性比例尺，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