定量比例尺 : 數(shù)學(xué)上有函數(shù)的概念，不是編程中所說的函數(shù)，如線性函數(shù)、指數(shù)函數(shù)、對數(shù)函數(shù)等，而指的是一個量隨著另一個量的變化而變化。例如有一下線性函數(shù) : y=2x+1該函數(shù)在二維坐標系中繪制出來的圖形是一條直線，如果限制x的范圍為[0,2]，則可計算得到y(tǒng)的范圍為[1,5]。x的范圍[0,2]稱為該函數(shù)的定義域，y的范圍稱為該函數(shù)的值域。根據(jù)x計算得到y(tǒng)的方法稱為對應(yīng)法則。定義域、值域、對應(yīng)法則稱為函數(shù)的三要素。 在數(shù)據(jù)可視化中，常需要像上述函數(shù)一樣，將一個量轉(zhuǎn)換為另一個量。D3提供了這樣的轉(zhuǎn)換方法，稱為比例尺(scale)。 我們現(xiàn)在所說的定量比例尺，是指當定義域是連續(xù)的情況。從0~2之間的所有值，稱為連續(xù)的值。類似0、1、2這樣的值，稱為離散的值 定量比例尺包括 : 線性比例尺、指數(shù)比例尺、對數(shù)比例尺、量子比例尺、分位比例尺和閾值比例尺。 按上面順序，首先先介紹線性比例尺 。 線性比例尺 線性比例尺(Linear Scale)是常用比例尺，與線性函數(shù)類似，計算線性的對應(yīng)關(guān)系。相關(guān)方法有: d3.scaleBand.linear() 　　　　　　? //創(chuàng)建一個比例尺。 linear(x) 　　　　　　　　　　　　 //輸入一個在定義域內(nèi)的值x，返回值域內(nèi)對應(yīng)的值。 linear.invert(y) 　　　　　　　　　 //輸入一個在值域內(nèi)的值，返回定義域內(nèi)對應(yīng)的值。 linear.domain([numbers]) 　　　　?? //設(shè)定或獲取定義域 linear.range([values]) 　　　　　　 ?//設(shè)定或獲取值域 linear.rangeRound([values]) 　　　 //代替range()使用的話，比例尺的輸出值會進行四舍五入的運算，結(jié)果為整數(shù)。 linear.clamp([boolean])　　　　? ? ? //默認被設(shè)置為false，當該比例尺接受一個超出定義域范圍內(nèi)的值時，依然能夠按照同樣的計算方法計算得到一個值，這個值可能是超出值域范圍的，如果設(shè)置為true，則任何超出值域的范圍的值，都會被收縮到值域范圍內(nèi)。 linear.nice([count]) 　　　　　　? ? ?//將定義域的范圍擴展成比較理想的形式。例如，定義域為[0.50000543,0.899995433221],則使用nice()之后，其定義域變?yōu)閇0.5,0.9]。對于[0.500000543,69.99998888]這樣的定義域，則自動將其變?yōu)閇0,70]. linear.ticks([count]) 　　　　　　? ? //設(shè)定或獲取定義域內(nèi)具有代表性的值得數(shù)目。count默認為10，如果定義域[0,70]，則該函數(shù)返回[0,10,20,30,40,50,60,70]。如果count設(shè)置為3，則返回? ?[0,20,40,60]。該方法主要用于選取坐標軸刻度。 linear.tickFormat(count,[format])? ? //用于設(shè)置定義域內(nèi)具有代表性的值得表示形式，如顯示到小數(shù)點后兩位，使用百分比的形式顯示，主要用于坐標軸上。
以上方法中,linear(x)、invert()、domain()、range()是基礎(chǔ)方法，使用形式看代碼: 1 var linear = d3.scale.linear() 2 .domain([0,20]) //設(shè)置定義域為[0,20] 3 .range([0,100]) //設(shè)置值域為[0,100] 4 5 console.log(linear(10)) //返回值50 6 console.log(linear(30)) //返回值150 7 console.log(linear.invert(80)) //返回值16

?

用linear()計算的結(jié)果是，輸出都是輸入值得5倍。而使用linear.invert()時，輸出都是輸入值得五分之一。要注意的是，倒數(shù)第二行，linear()接收了一個超出定義域范圍的值30，結(jié)果還是正常輸出其乘以5之后的值150.此輸出值也超過了值域的范圍如果不希望其超出范圍，可以使用clamp()，代碼如下: 1 linear.clamp(true) 2 console.log(linear(30)) //返回值100 將clamp()設(shè)置為true后，超出值域的值會取值域的上下限作為輸出。對于輸出的數(shù)值，如果希望對其進行四舍五入，要使用rangRound()來設(shè)置: 1 linear.rangeRound([0,100]); 2 console.log(linear(13.33)) //返回值67 如果不用rangeRound()重新設(shè)置值域，則輸出值為66.649999999999,其四舍五入后值為67.如果定義域中有無窮小數(shù)，可用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]

?

應(yīng)用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數(shù)組中的每一個值，都使用一次tickFormat()函數(shù) 10 ticks[i] = tickFormat(ticks[i]) 11 } 12 console.log(ticks) //返回值["-20", "-10", "+0", "+10", "+20"]

?

這段代碼中，比例尺的定義域為[-20,20]，調(diào)用ticks(5)之后返回一個數(shù)組，分別是該定義域內(nèi)具有代表性的值。然后，調(diào)用tickFormat(),返回值是一個函數(shù)，因此調(diào)用時要使用函數(shù)的調(diào)用方式。最終結(jié)果是，ticks變成了設(shè)定的格式。此外設(shè)定的格式為"+":表示如果是正數(shù)，則在前面添加一個加號，負數(shù)則添加一個減號。除此之外，常用的格式還有%、$等，遵循迷你語言格式規(guī)范。 比例尺的domain()和range()最少放入兩個數(shù)，可以超過兩個數(shù)，但兩者的數(shù)量必須相等，放入三個數(shù)的情況如下，代碼: 1 var scale = d3.scale.linear(); 2 scale.domain([0,20,40]) 3 .range([0,100,150]); 4 console.log(scale(30)) //返回值125

?

這表示有兩個線性函數(shù)，當輸入的值為30時，屬于domain的20~40的范圍，那么輸出為100~150范圍。 下一文章介紹指數(shù)比例尺和對數(shù)比例尺。

轉(zhuǎn)載于:https://www.cnblogs.com/littleSpill/p/10821332.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。