之前繪圖時(shí)，我們直接將數(shù)組中的值作為矩形元素的寬/高度，這種方式非常有局限性赃绊，如果數(shù)值大小比較極端，例如:
var dataset_1 = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
var dataset_2 = [ 2500, 2100, 1700, 1300, 900 ];
對(duì)以上兩個(gè)數(shù)組羡榴，絕不可能用 2.5 碧查、0.9個(gè)像素來(lái)代表矩形的寬度，那樣根本看不見(jiàn)校仑；也不可能用 2500 個(gè)像素來(lái)代表矩形的寬度忠售，因?yàn)楫?huà)布沒(méi)有那么長(zhǎng)。
于是肤视，我們需要一種計(jì)算關(guān)系档痪，能夠：將某一區(qū)域的值映射到另一區(qū)域，其大小關(guān)系不變邢滑。這就是比例尺（Scale）腐螟。
比例尺的使用
比例尺就是把一組輸入域映射到輸出域的函數(shù)。映射就是兩個(gè)數(shù)據(jù)集之間元素相互對(duì)應(yīng)的關(guān)系困后。比如輸入是1乐纸，輸出是100，輸入是5摇予，輸出是10000汽绢，那么這其中的映射關(guān)系就是你所定義的比例尺。
D3中有各種比例尺函數(shù)侧戴，有連續(xù)性的宁昭，有非連續(xù)性的
1. 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)系：
接下來(lái)，我們來(lái)研究這個(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()中的輸入域抛蚤。
2. d3.scaleBand() 序數(shù)比例尺
d3.scaleBand()并不是一個(gè)連續(xù)性的比例尺蛇券，domain()中使用一個(gè)數(shù)組，不過(guò)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
scale.bandwidth();//domain 映射到range上的寬度
由此可見(jiàn)，d3.scaleBand()只針對(duì)domain()中的數(shù)據(jù)集映射相應(yīng)的值。
3. 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ù)是一一對(duì)應(yīng)的，如果兩邊的值不一樣呢徊都？下面兩張圖說(shuō)明這個(gè)問(wèn)題：
domain()的值按照順序循環(huán)依次對(duì)應(yīng)range()的值择吊。
4. 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
而對(duì)于domain()域外的情況：
scale(-10) // 輸出：small
scale(10) // 輸出：long
大概就是對(duì)于domain()域的兩側(cè)的延展。
5. d3.scaleTime() 時(shí)間比例尺
d3.scaleTime()類(lèi)似于d3.scaleLinear()線性比例尺粒蜈，只不過(guò)輸入域變成了一個(gè)時(shí)間軸顺献。
let scale = d3.scaleTime().domain([new Date(2021, 9,9,0), new Date(2020 2, 2)]).range([0,100])
輸入與輸出：
scale(new Date(2021, 9, 9, 0)) // 輸出:0
scale(new Date(2021, 9, 9, 1)) // 輸出:50
時(shí)間比例尺較多用在根據(jù)時(shí)間順序變化的數(shù)據(jù)上。另外有一個(gè)d3.scaleUtc()是依據(jù)世界標(biāo)準(zhǔn)時(shí)間(UTC)來(lái)計(jì)算的枯怖。
6. 顏色比例尺
D3提供了一些顏色比例尺注整，10表示10種顏色，20就是20種：
d3.schemeCategory10
d3.schemeCategory20
d3.schemeCategory20b
d3.schemeCategory20c
定義一個(gè)序數(shù)顏色比例尺
let color = d3.scaleOrdinal(d3.schemeCategory10)
7. 其他比例尺
另外有一些函數(shù)比例尺的功能度硝，從名稱(chēng)上就可見(jiàn)一斑肿轨。
d3.scaleIdentity() // 恒等比例尺
d3.scaleSqrt() // 乘方比例尺
d3.scalePow() // 類(lèi)似scaleSqrt的乘方比例尺
d3.scaleLog() // 對(duì)數(shù)比例尺
d3.scaleQuantile() // 分位數(shù)比例尺
8. invert()與invertExtent()方法
上述的各種使用比例尺的例子都相當(dāng)于一個(gè)正序的過(guò)程，從domain的數(shù)據(jù)集映射到range數(shù)據(jù)集中蕊程，那么有沒(méi)有逆序的過(guò)程呢椒袍？D3中提供了invert()以及invertExtent()方法可以實(shí)現(xiàn)這個(gè)過(guò)程。
invertExtent() 取得輸出值對(duì)應(yīng)的輸入值
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]
不過(guò)藻茂，值得注意的是槐沼，這兩種方法只針對(duì)連續(xù)性比例尺有效，即domain()域?yàn)檫B續(xù)性數(shù)據(jù)集的比例尺捌治。
給柱形圖添加比例尺
<div id="test-svg">
</div>
var svg = d3.select("#test-svg")
.append('svg')
var dataset = [2.5, 2.1, 1.7, 1.3, 0.9];
var linear = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, 250]);
var rectHeight = 25;
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", 20)
.attr("y", function (d, i) {
return i * rectHeight;
})
.attr("width", function (d) {
return linear(d); //在這里用比例尺
})
.attr("height", rectHeight - 2)
.attr("fill", "steelblue");
