D3經常使用比例尺整理

本文主要是針對v4版本的一個整理，主要是用於自我學習，內容自D3中經常使用的比例尺轉載

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()中的輸入域。

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()中的數據集映射相應的值。

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()的值。

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()域的兩側的延展。

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)來計算的。

顏色比例尺

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

d3.schemeCategory10
d3.schemeCategory20
d3.schemeCategory20b
d3.schemeCategory20c

// 定義一個序數顏色比例尺
let color = d3.scaleOrdinal(d3.schemeCategory10)
複製代碼

其餘比例尺

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

d3.scaleIdentity() // 恆等比例尺
d3.scaleSqrt() // 乘方比例尺
d3.scalePow() // 相似scaleSqrt的乘方比例尺
d3.scaleLog() // 對數比例尺
d3.scaleQuantile() // 分位數比例尺
複製代碼

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()域爲連續性數據集的比例尺。