定量比例尺 : 數學上有函數的概念，不是編程中所說的函數，如線性函數、指數函數、對數函數等，而指的是一個量隨著另一個量的變化而變化。例如有一下線性函數 : 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范圍。 下一文章介紹指數比例尺和對數比例尺。

轉載于:https://www.cnblogs.com/littleSpill/p/10821332.html

總結

以上是生活随笔為你收集整理的D3.js比例尺 定量比例尺 之 线性比例尺(v3版本)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。