上一章給大家介紹了線性比例尺，https://www.cnblogs.com/littleSpill/p/10821332.html 現在給大家介紹一下指數比例尺和對數比例尺。 指數比例尺(Power Scale)和對數比例尺(Log Scale) : 指數比例尺(Power Scale)和對數比例 ...
上一章給大家介紹了線性比例尺，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()沒什麼區別。 下一文章介紹量子比例尺和分位比例尺。
