定量比例尺 : 數學上有函數的概念，不是編程中所說的函數，如線性函數、指數函數、對數函數等，而指的是一個量隨著另一個量的變化而變化。例如有一下線性函數 : y=2x+1該函數在二維坐標系中繪製出來的圖形是一條直線，如果限制x的範圍為[0,2]，則可計算得到y的範圍為[1,5]。x的範圍[0,2]稱為 ...
定量比例尺 : 數學上有函數的概念，不是編程中所說的函數，如線性函數、指數函數、對數函數等，而指的是一個量隨著另一個量的變化而變化。例如有一下線性函數 : y=2x+1該函數在二維坐標系中繪製出來的圖形是一條直線，如果限制x的範圍為[0,2]，則可計算得到y的範圍為[1,5]。x的範圍[0,2]稱為該函數的定義域，y的範圍稱為該函數的值域。根據x計算得到y的方法稱為對應法則。定義域、值域、對應法則稱為函數的三要素。 在數據可視化中，常需要像上述函數一樣，將一個量轉換為另一個量。D3提供了這樣的轉換方法，稱為比例尺(scale)。 我們現在所說的定量比例尺，是指當定義域是連續的情況。從0~2之間的所有值，稱為連續的值。類似0、1、2這樣的值，稱為離散的值 定量比例尺包括 : 線性比例尺、指數比例尺、對數比例尺、量子比例尺、分位比例尺和閾值比例尺。 按上面順序，首先先介紹線性比例尺 。 線性比例尺 線性比例尺(Linear Scale)是常用比例尺，與線性函數類似，計算線性的對應關係。相關方法有: d3.scaleBand.linear() //創建一個比例尺。 linear(x) //輸入一個在定義域內的值x，返回值域內對應的值。 linear.invert(y) //輸入一個在值域內的值，返回定義域內對應的值。 linear.domain([numbers]) //設定或獲取定義域 linear.range([values]) //設定或獲取值域 linear.rangeRound([values]) //代替range()使用的話，比例尺的輸出值會進行四捨五入的運算，結果為整數。 linear.clamp([boolean]) //預設被設置為false，當該比例尺接受一個超出定義域範圍內的值時，依然能夠按照同樣的計算方法計算得到一個值，這個值可能是超出值域範圍的，如果設置為true，則任何超出值域的範圍的值，都會被收縮到值域範圍內。 linear.nice([count]) //將定義域的範圍擴展成比較理想的形式。例如，定義域為[0.50000543,0.899995433221],則使用nice()之後，其定義域變為[0.5,0.9]。對於[0.500000543,69.99998888]這樣的定義域，則自動將其變為[0,70]. linear.ticks([count]) //設定或獲取定義域內具有代表性的值得數目。count預設為10，如果定義域[0,70]，則該函數返回[0,10,20,30,40,50,60,70]。如果count設置為3，則返回 [0,20,40,60]。該方法主要用於選取坐標軸刻度。 linear.tickFormat(count,[format]) //用於設置定義域內具有代表性的值得表示形式，如顯示到小數點後兩位，使用百分比的形式顯示，主要用於坐標軸上。
以上方法中,linear(x)、invert()、domain()、range()是基礎方法，使用形式看代碼:
1 var linear = d3.scale.linear()
2 .domain([0,20]) //設置定義域為[0,20]
3 .range([0,100]) //設置值域為[0,100]
4
5 console.log(linear(10)) //返回值50
6 console.log(linear(30)) //返回值150
7 console.log(linear.invert(80)) //返回值16
用linear()計算的結果是，輸出都是輸入值得5倍。而使用linear.invert()時，輸出都是輸入值得五分之一。要註意的是，倒數第二行，linear()接收了一個超出定義域範圍的值30，結果還是正常輸出其乘以5之後的值150.此輸出值也超過了值域的範圍如果不希望其超出範圍，可以使用clamp()，代碼如下:
1 linear.clamp(true)
2 console.log(linear(30)) //返回值100
將clamp()設置為true後，超出值域的值會取值域的上下限作為輸出。對於輸出的數值，如果希望對其進行四捨五入，要使用rangRound()來設置:
1 linear.rangeRound([0,100]);
2 console.log(linear(13.33)) //返回值67
如果不用rangeRound()重新設置值域，則輸出值為66.649999999999,其四捨五入後值為67.如果定義域中有無窮小數，可用nice(),代碼:
1 linear.domain([0.123000000,0.488888888])
2 .nice()
3 console.log(linear.domain()) //返回值[0.1,0.5]
4
5
6 linear.domain([33.611111,45.97745])
7 .nice()
8 console.log(linear.domain()) //返回值[33,46]
應用nice()後，定義域變成了比較工整的形式，但是並不是四捨五入。最後講解ticks()和tickFormat()的用法，它們主要是用在坐標軸上的。看代碼:
1 var linear2 = d3.scale.linear()
2 .domain([-20,20])
3 .range([0,100])
4 var ticks = linear2.ticks(5);
5 console.log(ticks) //返回值[-20, -10, 0, 10, 20]
6
7 var tickFormat = linear2.tickFormat(5,"+");
8 for (var i = 0; i < ticks.length ; i++){
9 //ticks數組中的每一個值，都使用一次tickFormat()函數
10 ticks[i] = tickFormat(ticks[i])
11 }
12 console.log(ticks) //返回值["-20", "-10", "+0", "+10", "+20"]
這段代碼中，比例尺的定義域為[-20,20]，調用ticks(5)之後返回一個數組，分別是該定義域內具有代表性的值。然後，調用tickFormat(),返回值是一個函數，因此調用時要使用函數的調用方式。最終結果是，ticks變成了設定的格式。此外設定的格式為"+":表示如果是正數，則在前面添加一個加號，負數則添加一個減號。除此之外，常用的格式還有%、$等，遵循迷你語言格式規範。 比例尺的domain()和range()最少放入兩個數，可以超過兩個數，但兩者的數量必須相等，放入三個數的情況如下，代碼:
1 var scale = d3.scale.linear();
2 scale.domain([0,20,40])
3 .range([0,100,150]);
4 console.log(scale(30)) //返回值125
這表示有兩個線性函數，當輸入的值為30時，屬於domain的20~40的範圍，那麼輸出為100~150範圍。 下一文章介紹指數比例尺和對數比例尺。
