d3比例尺好比地圖上的映射斑响，偌大的世界可以縮小到一張很小的紙上菱属，d3在作圖的過程中，為了將數(shù)據(jù)映射展示到一張小小的畫布上舰罚，當(dāng)然也離不開比例尺了纽门。那數(shù)據(jù)是多種多樣的，有離散的营罢，有連續(xù)的赏陵，還有按時間順序的，所以要作圖之前必須要選好合適的比例尺愤钾。
1.d3.scaleLinear()連續(xù)型比例尺---適合折線圖的x軸y軸
d3.scaleLinear()創(chuàng)造一個連續(xù)型的線性比例尺瘟滨，此比例尺對應(yīng)的數(shù)據(jù)都是連續(xù)型的，.domain()是輸入域能颁，也就是對應(yīng)實際的數(shù)據(jù)杂瘸，.range()是輸出域?qū)?yīng)。注釋也很重要哦~~
var _linescale = d3.scaleLinear()
.domain([0,100]).nice()//nice用來優(yōu)化數(shù)據(jù) 四舍五入等
.range([0,300])//亦可以用rangeRound輸出整數(shù)
.clamp(true);//這里為true保證輸入的數(shù)據(jù)超出輸入域的范圍也能落在range內(nèi)伙菊。
//獲取輸入域中某個數(shù)值對應(yīng)的輸出域結(jié)果
console.log(_linescale(40));//結(jié)果為120
console.log(_linescale(120));//結(jié)果為300败玉，如果clamp(false)結(jié)果為360。
//獲取輸出域中對應(yīng)的某個輸入域的值
console.log(_linescale.invert(200));//結(jié)果為66.66666666666666
console.log(_linescale.ticks(5));//結(jié)果[0, 20, 40, 60, 80, 100]
//.tickFormat設(shè)置格式如百分比等
clamp(true)保證輸入的數(shù)據(jù)超出輸入域的范圍也能落在range內(nèi)镜硕；
clamp(false)超出domain的部分运翼，也會超出range()。
2. d3.scaleBand() 序數(shù)比例尺---適合柱圖x軸
d3.scaleBand() 創(chuàng)建一個序數(shù)比例尺兴枯，其中.domain()是離散型的數(shù)組血淌，比如[1,2,3,4],而range()要是一個連續(xù)域。
var _bandscale = d3.scaleBand()
.padding(0.2)//20%包括內(nèi)外邊距及段間距paaddingInner只包括段間距
.domain(['0~50','50~100','100~200','200~500','500~1000','>1000'])
.range([0,700]);
console.log(_bandscale('0~50'));//19.354838709677438
console.log(_bandscale('100~200'));//212.90322580645162
console.log(_bandscale('100'));//undefined
console.log(_bandscale.bandwidth());//77.41935483870968
console.log(_bandscale.step());//步長包括bandWidth以及padding 96.77419354838709
與上面的連續(xù)型比例尺不一樣的是這里輸入域不能超出domain的范圍，超出就會輸出undefined悠夯。
3. d3.scaleOrdinal() 序數(shù)比例尺---適合散點圖的x軸
var _ordinalscale = d3.scaleOrdinal()
.domain(['jack', 'rose', 'john'])
.range([10, 20, 30]);
console.log(_ordinalscale('jack'));//10
console.log(_ordinalscale('rose'));//20
console.log(_ordinalscale('john'));//30
那當(dāng)輸入domain以外的數(shù)據(jù)時癌淮，也能輸出正確的值：
console.log(_ordinalscale('a'));//10
console.log(_ordinalscale('adjjs'));//20
4. d3.scaleQuantize() 量化比例尺 ---適合給連續(xù)型的數(shù)據(jù)分等級
domain()是連續(xù)型的，range()是離散型的沦补。
var score = d3.scaleQuantize()
.domain([10, 100])
.range(['C', 'B', 'A']);
console.log(score(20)); // C
console.log(score(50)); // B
console.log(score(60)); // B
console.log(score(80)); // A
如果超出domain范圍,依然會有對應(yīng)映射輸出：
console.log(score(1));//C
console.log(score(120));//A
5. d3.scaleTime() 時間比例尺
時間比例尺屬于連續(xù)型比例尺的一種乳蓄。只不過domain()輸入域變成了時間軸。
let _datescale = d3.scaleTime()
.domain([new Date(2017, 0, 1), new Date(2017, 0, 2)])
.range([0,200])
console.log(_datescale(new Date(2017, 0, 1, 12)));//100
console.log(_datescale(new Date(2017, 0, 1, 15)));//125
console.log(_datescale(new Date(2017, 0, 1, 20)));//166.66666666666669
如果超出輸入域的范圍也能正常映射：
console.log(_datescale(new Date(2017, 0, 2, 20)));//366.66666666666663
6. 顏色比例尺
D3提供了一些顏色比例尺夕膀，10就是10種顏色：
<div>
<p>hello</p>
<p>d3</p>
<p>world</p>
<p>scales</p>
<p>are</p>
<p>very</p>
<p>fine</p>
<p>so</p>
<p>funny</p>
<p>!</p>
</div>
<script>
d3.selectAll('p').style('background',function(d,i){
return d3.schemeCategory10[i]
});
</script>
7. 其他比例尺
另外有一些函數(shù)比例尺的功能
d3.scalePow//乘方比例尺
d3.scaleSqrt//開方比例尺
d3.scaleLog//對數(shù)比例尺
d3.scaleSymlog//對稱對數(shù)比例尺
d3.scaleIdentity//恒等比例尺
d3.scaleUtc//UTC 線性比例尺
詳見官網(wǎng)其他比例尺
參考文章 D3中常用的比例尺
