d3比例尺

d3比例尺好比地图上的映射，偌大的世界可以缩小到一张很小的纸上，d3在作图的过程中，为了将数据映射展示到一张小小的画布上，当然也离不开比例尺了。那数据是多种多样的，有离散的，有连续的，还有按时间顺序的，所以要作图之前必须要选好合适的比例尺。

1.d3.scaleLinear()连续型比例尺---适合折线图的x轴y轴

d3.scaleLinear()创造一个连续型的线性比例尺，此比例尺对应的数据都是连续型的，.domain()是输入域，也就是对应实际的数据，.range()是输出域对应。注释也很重要哦~~

var _linescale = d3.scaleLinear()
               .domain([0,100]).nice()//nice用来优化数据  四舍五入等
               .range([0,300])//亦可以用rangeRound输出整数
               .clamp(true);//这里为true保证输入的数据超出输入域的范围也能落在range内。
    //获取输入域中某个数值对应的输出域结果
    console.log(_linescale(40));//结果为120
    console.log(_linescale(120));//结果为300，如果clamp(false)结果为360。
    //获取输出域中对应的某个输入域的值
    console.log(_linescale.invert(200));//结果为66.66666666666666
    console.log(_linescale.ticks(5));//结果[0, 20, 40, 60, 80, 100]
  //.tickFormat设置格式如百分比等

clamp(true)保证输入的数据超出输入域的范围也能落在range内；
clamp(false)超出domain的部分，也会超出range()。

2. d3.scaleBand() 序数比例尺---适合柱图x轴

d3.scaleBand() 创建一个序数比例尺，其中.domain()是离散型的数组，比如[1,2,3,4],而range()要是一个连续域。

var _bandscale = d3.scaleBand()
     .padding(0.2)//20%包括内外边距及段间距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

与上面的连续型比例尺不一样的是这里输入域不能超出domain的范围，超出就会输出undefined。

3. d3.scaleOrdinal() 序数比例尺---适合散点图的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

那当输入domain以外的数据时，也能输出正确的值：

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

4. d3.scaleQuantize() 量化比例尺 ---适合给连续型的数据分等级

domain()是连续型的，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范围,依然会有对应映射输出：

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

5. d3.scaleTime() 时间比例尺

时间比例尺属于连续型比例尺的一种。只不过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>

p1.png

7. 其他比例尺

另外有一些函数比例尺的功能

d3.scalePow//乘方比例尺
d3.scaleSqrt//开方比例尺
d3.scaleLog//对数比例尺
d3.scaleSymlog//对称对数比例尺
d3.scaleIdentity//恒等比例尺
d3.scaleUtc//UTC 线性比例尺

详见官网其他比例尺

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