D3中常用的比例尺

d3中有個重要的概念就是比例尺。比例尺就是把一組輸入域對映到輸出域的函式。對映就是兩個資料集之間元素相互對應的關係。比如輸入是1，輸出是100，輸入是5，輸出是10000，那麼這其中的對映關係就是你所定義的比例尺。

d3中有各種比例尺函式，有連續性的，有非連續性的，本文對於常用比例尺進行一一介紹。

1. d3.scalelinear() 線性比例尺

使用d3.scalelinear()創造乙個線性比例尺，而domain()是輸入域，range()是輸出域，相當於將domain中的資料集對映到range的資料集中。

let scale = d3.scalelinear().domain([1,5]).range([0,100])

對映關係：

接下來，我們來研究這個比例尺的輸入和輸出。

scale(1) // 輸出:0
scale(4) // 輸出:75
scale(5) // 輸出:100

剛才的輸入都是使用了domain區域裡的資料，那麼使用區域外的資料會得出什麼結果呢？

scale(-1) // 輸出:-50
scale(10) // 輸出:225

所以這只是定義了乙個對映規則，對映的輸入值並不侷限於domain()中的輸入域。

2. d3.scaleband() 序數比例尺

d3.scaleband()並不是乙個連續性的比例尺，domain()中使用乙個陣列，不過range()需要是乙個連續域。

let scale = d3.scaleband().domain([1,2,3,4]).range([0,100])

對映關係：

看一下輸入與輸出：

scale(1) // 輸出:0
scale(2) // 輸出:25
scale(4) // 輸出:75

當輸入不是domain()中的資料集時：

scale(0)  // 輸出:undefined
scale(10) // 輸出:undefined

由此可見，d3.scaleband()只針對domain()中的資料集對映相應的值。

3. d3.scaleordinal() 序數比例尺

d3.scaleordinal()的輸入域和輸出域都使用離散的資料。

let scale = d3.scaleordinal().domain(['jack', 'rose', 'john']).range([10, 20, 30])

對映關係：

輸入與輸出：

scale('jack') // 輸出:10
scale('rose') // 輸出:20
scale('john') // 輸出:30

當輸入不是domain()中的資料集時：

scale('tom') // 輸出:10
scale('trump') // 輸出:20

輸入不相關的資料依然可以輸出值。所以在使用時，要注意輸入資料的正確性。

我們從上面的對映關係中可以看出，domain()和range()的資料是一一對應的，如果兩邊的值不一樣呢？下面兩張圖說明這個問題：

domain()的值按照順序迴圈依次對應range()的值。

4. d3.scalequantize() 量化比例尺

d3.scalequantize()也屬於連續性比例尺。定義域是連續的，而輸出域是離散的。

let scale = d3.scalequantize().domain([0, 10]).range(['small', 'medium', 'long'])

對映關係：

輸入與輸出：

scale(1) // 輸出:small
scale(5.5) // 輸出:medium
scale(8) // 輸出:long

而對於domain()域外的情況：

scale(-10) // 輸出：small
scale(10) // 輸出：long

大概就是對於domain()域的兩側的延展。

5. d3.scaletime() 時間比例尺

d3.scaletime()類似於d3.scalelinear()線性比例尺，只不過輸入域變成了乙個時間軸。

let scale = d3.scaletime()
.domain([new date(2017, 0, 1, 0), new date(2017, 0, 1, 2)])
.range([0,100])

輸入與輸出：

scale(new date(2017, 0, 1, 0)) // 輸出:0
scale(new date(2017, 0, 1, 1)) // 輸出:50

時間比例尺較多用在根據時間順序變化的資料上。另外有乙個d3.scaleutc()是依據世界標準時間(utc)來計算的。

6. 顏色比例尺

d3提供了一些顏色比例尺，10就是10種顏色，20就是20種：

d3.schemecategory10
d3.schemecategory20
d3.schemecategory20b
d3.schemecategory20c
// 定義乙個序數顏色比例尺
let color = d3.scaleordinal(d3.schemecategory10)

7. 其他比例尺

另外有一些函式比例尺的功能，從名稱上就可見一斑。

d3.scaleidentity() // 恒等比例尺
d3.scalesqrt() // 乘方比例尺
d3.scalepow() // 類似scalesqrt的乘方比例尺
d3.scalelog() // 對數比例尺
d3.scalequantile() // 分位數比例尺

8.invert()與invertextent()方法

上述的各種使用比例尺的例子都相當於乙個正序的過程，從domain的資料集對映到range資料集中，那麼有沒有逆序的過程呢？d3中提供了invert()以及invertextent()方法可以實現這個過程。

let scale = d3.scalelinear().domain([1,5]).range([0,100])
scale.invert(50) // 輸出:3
let scale2 = d3.scalequantize().domain([0,10]).range(['small', 'big'])
scale2.invertextent('small') // 輸出:[0,5]

不過，值得注意的是，這兩種方法只針對連續性比例尺有效，即domain()域為連續性資料集的比例尺。那麼非連續性的比例尺就沒有invert()方法了嗎？

收尾到此，對於d3v4版本中的常見比例尺的對映關係都進行了介紹，而各個比例尺還提供了許多其他功能，比如在繪製座標軸中用到的ticks()，tickformat()等功能，具體api可以參見此處。關於第8點最後提出的問題，請聽下回分解。

D3中常用的比例尺

D3中的比例尺

d3裡的比例尺

d3的比例尺和座標軸

D3中常用的比例尺

D3中的比例尺

d3裡的比例尺

d3的比例尺和座標軸

相關推薦