【D3.js 学习总结】6、D3比例尺

概念

比例尺是一组把输入域映射为输出范围的函数,它将真实值实际显示值做了一个映射,
在之前的例子中,我们已经用到了线性比例尺;

var _x = d3.scale.linear().domain([0,10]).range([0,100])

它的意思是将0-10之间的输入域以线性的方式映射到0-100的输出范围上,也就是说传入的值为10,显示的时候显示为100;

_x(0); // 返回0
_x(5); // 返回50
_x(10); // 返回100

常用方法

_x.nice()

告诉比例尺取得为range() 设置的任何值域,把两端的值扩展到最接近的数,比如,值域[0.20147987687960267, 0.996679553296417]的扩展值域为[0.2, 1],这个方法对正常人都有用,因为人不是计算机,看到0.20147987687960267 这样的数你一定会头大。

_x.rangeRound()

用rangeRound() 代替range() 后,则比例尺输出的所有值都会舍入到最接近的整数值,对输出值取整有利于图形对应精确的像素值,避免边缘出现模糊不清的锯齿。

_x.clamp()

默认情况下,线性比例尺可以返回指定范围之外的值。例如,假如给定的值位于输入值域之外,那么比例尺也会返回一个位于输出范围之外的值。不过,在比例尺上调用clamp(true) 后,就可以强制所有输出值都位于指定的范围内。这意味着超出范围的值,会被取整到范围的最低值或最高值(总之是最接近的那个值)。

其它比例尺:

d3.scale.linear - 线性比例尺

将输入域值按线性等比的方式分隔作为输出范围

示例:d3.scale.linear().domain([0,100]).range([0,700])
应用场景:按比例、成直线的展现或者规则、光滑的运动

【D3.js 学习总结】6、D3比例尺

d3.scale.identity - 线性恒等比例尺

线性恒等比例尺是线性比例尺的特殊类型,实现输入域与输出范围 1:1 的缩放,其方法都是恒等函数

示例:d3.scale.identity().domain([0,100])
应用场景:在处理像素坐标时有用,输入值是多少像素,在输出显示时也是多少像素

【D3.js 学习总结】6、D3比例尺

d3.scale.quantize - 量化比例尺

量化比例尺是线性比例尺的变体,输入的域是连续的,使用离散的range,输入数据被分割成不同的片段,也即是分类,如10个人按设定的年龄分类。

示例:d3.scale.quantize().domain([0,10]).range([0,10,20,30,40,50,60,70]);
应用场景:想把数据分类的情形(!还没想到最适合的业务场景

var quantize = d3.scale.quantize().domain([0,10]).range([0,10,20,30,40,50,60,70]);
quantize(0) ==> 0
quantize(1) ==> 0
quantize(2) ==> 10
quantize(3) ==> 20
quantize(4) ==> 30
quantize(5) ==> 40
quantize(6) ==> 40
quantize(7) ==> 50
quantize(8) ==> 60
quantize(9) ==> 70
quantize(10) ==> 70

d3.scale.quantile - 分位数比例尺

分位数比例尺是线性比例尺的变体,无论输入数据怎么分布,都会被映射成离散值

示例:d3.scale.quantile().domain([0,10,20,30,40,50,60,70]).range([0,100,200,300,400,500,700]);
应用场景:已经对数据分类的情形(!似懂非懂,需要继续研究

【D3.js 学习总结】6、D3比例尺

d3.scale.log - 对数比例尺

对数比例尺与线性比例尺相似,区别是对数比例尺首先对输入数据进行对数变换 。

示例:d3.scale.log().domain([1,100]).range([0,700]).base(2);
应用场景:输入值以对数级变化的数据集(!不太熟悉对数,需要继续研究

【D3.js 学习总结】6、D3比例尺

d3.scale.pow - 指数比例尺

指数比例尺与线性比例尺相似,区别是pow比例尺首先对输入数据进行指数变换,默认指数为1,所以默认情况下也是数值 1:1 的缩放。

示例:d3.scale.pow().domain([0,100]).range([0,700]).exponent(2);
应用场景:输入值以指数级变化的数据集

【D3.js 学习总结】6、D3比例尺

d3.scale.sqrt - 平方根比例尺

平方根比例尺是pow比例尺的特殊类型,相当于 d3.scale.pow().exponent(0.5)

示例:d3.scale.sqrt().domain([0,100]).range([0,700])
应用场景:输入值以平方根变化的数据集

【D3.js 学习总结】6、D3比例尺

d3.scale.threshold - 临界值比例尺

临界值比例尺与量化比例尺类似,不过允许将任意的子集映射到离散的range。

示例:d3.scale.threshold().domain([0,1,2,3,4,5,6,7]).range([0,0,100,200,300,400,500,600,700]);
应用场景:暂不清楚(!还没完全明白,需要继续研究

【D3.js 学习总结】6、D3比例尺

d3.scale.ordinal - 序数比例尺

使用非定量值(如类名)作为输出的序数比例尺

示例:d3.scale.ordinal().domain(["A", "B", "C", "D", "E", "F", "G", "H"]) .range([0,100,200,300,400,500,600,700]);
应用场景:输入值与转出值需要一一对应的场景

【D3.js 学习总结】6、D3比例尺

d3.scale.category10()

构造一个新的颜色序数比例尺,使用10种类型的颜色:

#1f77b4 #ff7f0e #2ca02c #d62728 #9467bd #8c564b #e377c2 #7f7f7f #bcbd22 #17becf

【D3.js 学习总结】6、D3比例尺

d3.scale.category20()

构造一个新的颜色序数比例尺,使用20种类型的颜色:

#1f77b4 #aec7e8 #ff7f0e #ffbb78 #2ca02c #98df8a #d62728 #ff9896 #9467bd #c5b0d5 #8c564b #c49c94 #e377c2 #f7b6d2 #7f7f7f #c7c7c7 #bcbd22 #dbdb8d #17becf #9edae5

【D3.js 学习总结】6、D3比例尺

d3.scale.category20b()

构造一个新的颜色序数比例尺,使用20种类型的颜色:

#393b79 #5254a3 #6b6ecf #9c9ede #637939 #8ca252 #b5cf6b #cedb9c #8c6d31 #bd9e39 #e7ba52 #e7cb94 #843c39 #ad494a #d6616b #e7969c #7b4173 #a55194 #ce6dbd #de9ed6

【D3.js 学习总结】6、D3比例尺

d3.scale.category20c()

构造一个新的颜色序数比例尺,使用20种类型的颜色:

#3182bd #6baed6 #9ecae1 #c6dbef #e6550d #fd8d3c #fdae6b #fdd0a2 #31a354 #74c476 #a1d99b #c7e9c0 #756bb1 #9e9ac8 #bcbddc #dadaeb #636363 #969696 #bdbdbd #d9d9d9 

【D3.js 学习总结】6、D3比例尺

d3.time.scale - 日期和时间值比例尺

将日期和时间映射到具体的数值

示例:d3.time.scale().domain([new Date('2015-1-1'), new Date('2016-12-1')]).range([0,700]).nice();
应用场景:对日期刻度作特殊处理的场景

【D3.js 学习总结】6、D3比例尺

查看在线示例

上一篇:【D3.js 学习总结】1、初识D3


下一篇:【D3.js 学习总结】9、D3布局-饼状图