d3比例尺好比地圖上的映射，偌大的世界可以縮小到一張很小的紙上，d3在作圖的過程中，為了將數(shù)據(jù)映射展示到一張小小的畫布上，當(dāng)然也離不開比例尺了。那數(shù)據(jù)是多種多樣的，有離散的，有連續(xù)的，還有按時(shí)間順序的，所以要作圖之前必須要選好合適的比例尺。

1.d3.scaleLinear()連續(xù)型比例尺---適合折線圖的x軸y軸

d3.scaleLinear()創(chuàng)造一個(gè)連續(xù)型的線性比例尺，此比例尺對(duì)應(yīng)的數(shù)據(jù)都是連續(xù)型的，.domain()是輸入域，也就是對(duì)應(yīng)實(shí)際的數(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)。
    //獲取輸入域中某個(gè)數(shù)值對(duì)應(yīng)的輸出域結(jié)果
    console.log(_linescale(40));//結(jié)果為120
    console.log(_linescale(120));//結(jié)果為300，如果clamp(false)結(jié)果為360。
    //獲取輸出域中對(duì)應(yīng)的某個(gè)輸入域的值
    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的部分，也會(huì)超出range()。

2. d3.scaleBand() 序數(shù)比例尺---適合柱圖x軸

d3.scaleBand() 創(chuàng)建一個(gè)序數(shù)比例尺，其中.domain()是離散型的數(shù)組，比如[1,2,3,4],而range()要是一個(gè)連續(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());//步長(zhǎng)包括bandWidth以及padding 96.77419354838709

與上面的連續(xù)型比例尺不一樣的是這里輸入域不能超出domain的范圍，超出就會(huì)輸出undefined。

3. d3.scaleOrdinal() 序數(shù)比例尺---適合散點(diǎn)圖的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ù)時(shí)，也能輸出正確的值：

console.log(_ordinalscale('a'));//10
console.log(_ordinalscale('adjjs'));//20

4. d3.scaleQuantize() 量化比例尺 ---適合給連續(xù)型的數(shù)據(jù)分等級(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范圍,依然會(huì)有對(duì)應(yīng)映射輸出：

console.log(score(1));//C
console.log(score(120));//A

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

時(shí)間比例尺屬于連續(xù)型比例尺的一種。只不過domain()輸入域變成了時(shí)間軸。

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>

p1.png

7. 其他比例尺

另外有一些函數(shù)比例尺的功能

d3.scalePow//乘方比例尺
d3.scaleSqrt//開方比例尺
d3.scaleLog//對(duì)數(shù)比例尺
d3.scaleSymlog//對(duì)稱對(duì)數(shù)比例尺
d3.scaleIdentity//恒等比例尺
d3.scaleUtc//UTC 線性比例尺

詳見官網(wǎng)其他比例尺

參考文章 D3中常用的比例尺