d3.js中比例尺是一个很重要的概念,而且比例尺有很多种,今天看看一些常见的比例尺:

d3.scaleLinear

线性比例尺,domain是一个范围,range也是一个范围:

图示关系如下:

background Layer 1 1 10 1 100 domain range

对于不在domain范围内的输入,也会遵循这种映射关系,例如上面的scale(12),得到的是120。

d3.scaleBand

scaleBand的domain是离散型,range是范围:

关系图如下:

background Layer 1 0 25 50 75 100 1 2 3 4

对于不在domain范围内的输入,得到的是undefined。

bandwidth()方法,可以得到段落的宽度。

d3.scaleOrdinal

scaleOrdinal中的domain和range都是离散类型:

关系图:

background Layer 1 a b c 1 2 3

需要注意如果domain和range中个数不同的时候:

background Layer 1 a b c 1 2 3 4 domain个数小于range个数 a b c 1 2 3 domain个数大于range个数 d e

我们可以看到,当domain个数大于range个数的时候,就会从头再循环range中的内容。

当一个输入内容不在domain的范围内,也会从头遍历range中的内容,例如demo中的scale('d'),scale('e'),d和e本不在domain中,但是得到了1,2的结果。

若调用unknown('Not match')方法,那么不在domain范围内的,将会返回'Not match'。

d3.scaleQuantize

scaleQuantize的domain是范围,range是离散的:

关系图:

background Layer 1 1 9 3 6 a b c

对于不在domain范围内的输入,例如上图中,如果输入小于1,那么返回的是a;如果输入大于9,那么返回的是c。

d3.scaleTime

时间比例尺,domain里面是一个时间范围,range也是一个范围:

关系图:

background Layer 1 2017/1/1 2019/1/1 0 100

输入不在domain范围内的,也是按照那个对应关系去计算,例如scale(new Date(2016,1,1))得到的就是-50。

d3.scaleSequential

scaleSequential中利用插值函数作为range,d3中有自带很多插值函数,例如d3.interpolateRainbow等,下面看一个例子:

关键代码:

多个映射关系

例如scaleLinear,scaleTime等domain,range都是范围的,可以设置多个不同的映射关系:

关系图如下:

background Layer 1 0 10 20 0 100 1000

对于超出的部分,是按照各自最近的映射关系来的,例如scale(-10),是按照[0,10],[0,100]的映射来;如果是例如scale(30),那么是按照[10,20],[100,1000]的映射关系来。

d3.scaleQuantile

scaleQuantile的domain是离散型,range也是离散型:

不过scaleQuantile的离散不是一一对应的关系,而是多对一:

background Layer 1 1 2 3 4 5 6 7 8 9 10 11 12 a b c

scaleQuantile中domain的数据应该是有顺序的,例如从小到大或者从大到小。

quantiles()方法,可以得到每个部分的平均值(划分点)是多少。

d3.scaleThreshold

scaleThreshold中的domain和range都是离散类型:

不过scaleThreshold中的domain是分割点,比range的个数少一个。

background Layer 1 0 50 100 a b c d

d3.scalePoint

scalePoint的domain是离散型,range是范围:

和scaleBand不同的是,它是均分整个范围:

background Layer 1 a b c d 0 100 33.3 66.6

step()方法可以得到平分长度。

注意在坐标轴上的应用,scaleBand和scalePoint的表现也不一样:

scaleBand是居中分布,scalePoint是完整分布。

invert()和invertExtend()方法

对domain为范围的,可以用invert()或invertExtend()通过range得到domain:

nice方法

nice可以让一些不太好看的坐标看起来更好看(数据更整齐):

clamp方法

例如scaleLinear,scaleTime等比例尺,当输入不在domain的时候,也会根据比例进行计算,如果不希望计算,可以用设置.clamp(true)。

上面的例子中,如果没有设置clamp(true),那么linearScale(-10)返回的是-100;设置后,返回的是0。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字