本文主要是針對v4版本的一個(gè)整理，主要是用于自我學(xué)習(xí)，內(nèi)容自D3中常用的比例尺轉(zhuǎn)載

d3.scaleLinear() 線性比例尺

使用d3.scaleLinear()創(chuàng)造一個(gè)線性比例尺，而domain()是輸入域，range()是輸出域，相當(dāng)于將domain中的數(shù)據(jù)集映射到range的數(shù)據(jù)集中。

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

映射關(guān)系：

接下來，我們來研究這個(gè)比例尺的輸入和輸出

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

剛才的輸入都是使用了domain區(qū)域里的數(shù)據(jù)，那么使用區(qū)域外的數(shù)據(jù)會(huì)得出什么結(jié)果呢？

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

所以這只是定義了一個(gè)映射規(guī)則，映射的輸入值并不局限于domain()中的輸入域。

d3.scaleBand() 序數(shù)比例尺

d3.scaleBand()并不是一個(gè)連續(xù)性的比例尺，domain()中使用一個(gè)數(shù)組，不過range()需要是一個(gè)連續(xù)域。

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

映射關(guān)系：

看一下輸入與輸出：

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

當(dāng)輸入不是domain()中的數(shù)據(jù)集時(shí)：

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

由此可見，d3.scaleBand()只針對domain()中的數(shù)據(jù)集映射相應(yīng)的值。

d3.scaleOrdinal() 序數(shù)比例尺

d3.scaleOrdinal()的輸入域和輸出域都使用離散的數(shù)據(jù)。

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

映射關(guān)系：

輸入與輸出：

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

當(dāng)輸入不是domain()中的數(shù)據(jù)集時(shí)：

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

輸入不相關(guān)的數(shù)據(jù)依然可以輸出值。所以在使用時(shí)，要注意輸入數(shù)據(jù)的正確性。
我們從上面的映射關(guān)系中可以看出，domain()和range()的數(shù)據(jù)是一一對應(yīng)的，如果兩邊的值不一樣呢？下面兩張圖說明這個(gè)問題：

d3.scaleQuantize() 量化比例尺

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

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

映射關(guān)系：

輸入與輸出：

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

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

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

大概就是對于domain()域的兩側(cè)的延展。

d3.scaleTime() 時(shí)間比例尺

d3.scaleTime()類似于d3.scaleLinear()線性比例尺，只不過輸入域變成了一個(gè)時(shí)間軸。

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

時(shí)間比例尺較多用在根據(jù)時(shí)間順序變化的數(shù)據(jù)上。另外有一個(gè)d3.scaleUtc()是依據(jù)世界標(biāo)準(zhǔn)時(shí)間(UTC)來計(jì)算的。

顏色比例尺

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

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

// 定義一個(gè)序數(shù)顏色比例尺
let color = d3.scaleOrdinal(d3.schemeCategory10)

其他比例尺

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

d3.scaleIdentity() // 恒等比例尺
d3.scaleSqrt() // 乘方比例尺
d3.scalePow() // 類似scaleSqrt的乘方比例尺
d3.scaleLog() // 對數(shù)比例尺
d3.scaleQuantile() // 分位數(shù)比例尺

invert()與invertExtent()方法

上述的各種使用比例尺的例子都相當(dāng)于一個(gè)正序的過程，從domain的數(shù)據(jù)集映射到range數(shù)據(jù)集中，那么有沒有逆序的過程呢？D3中提供了invert()以及invertExtent()方法可以實(shí)現(xiàn)這個(gè)過程。

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]

不過，值得注意的是，這兩種方法只針對連續(xù)性比例尺有效，即domain()域?yàn)檫B續(xù)性數(shù)據(jù)集的比例尺。