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种颜色:

    

hello

d3

world

scales

are

very

fine

so

funny

!

p1.png

7. 其他比例尺

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

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

详见官网其他比例尺

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

你可能感兴趣的:(d3比例尺)