D3中常用的比例尺
https://segmentfault.com/a/1190000011006780D3中有個重要的概念就是比例尺，比例尺就是把一組輸入域映射到輸出域的函式，映射就是兩個資料集之間元素相互對應的關系，比如輸入是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點最后提出的問題，請聽下回分解，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/549.html
標籤：其他
上一篇：Unity安卓共享紋理