D3.js比例尺 定量比例尺 之 线性比例尺(v3版本)

释放双眼,带上耳机,听听看~!

定量比例尺 :
数学上有函数的概念,不是编程中所说的函数,如线性函数、指数函数、对数函数等,而指的是一个量随着另一个量的变化而变化。
例如有一下线性函数 : y=2x+1
该函数在二维坐标系中绘制出来的图形是一条直线,如果限制x的范围为[0,2],则可计算得到y的范围为[1,5]。
x的范围[0,2]称为该函数的定义域,y的范围称为该函数的值域。根据x计算得到y的方法称为对应法则。
定义域、值域、对应法则称为函数的三要素。  
在数据可视化中,常需要像上述函数一样,将一个量转换为另一个量。D3提供了这样的转换方法,称为比例尺(scale)。  
我们现在所说的定量比例尺,是指当定义域是连续的情况。从0~2之间的所有值,称为连续的值。类似0、1、2这样的值,称为离散的值  
定量比例尺包括 : 线性比例尺指数比例尺对数比例尺量子比例尺分位比例尺阈值比例尺  
按上面顺序,首先先介绍线性比例尺 。  
线性比例尺
线性比例尺(Linear Scale)是常用比例尺,与线性函数类似,计算线性的对应关系。相关方法有:  
d3.scaleBand.linear()        
//创建一个比例尺。  
linear(x)             
//输入一个在定义域内的值x,返回值域内对应的值。  
linear.invert(y)          
//输入一个在值域内的值,返回定义域内对应的值。  
linear.domain([numbers])       
//设定或获取定义域  
linear.range([values])       
 //设定或获取值域  
linear.rangeRound([values])    
//代替range()使用的话,比例尺的输出值会进行四舍五入的运算,结果为整数。  
linear.clamp([boolean])         
//默认被设置为false,当该比例尺接受一个超出定义域范围内的值时,依然能够按照同样的计算方法计算得到一个值,
这个值可能是超出值域范围的,如果设置为true,则任何超出值域的范围的值,都会被收缩到值域范围内。  
linear.nice([count])          
 //将定义域的范围扩展成比较理想的形式。例如,定义域为[0.50000543,0.899995433221],则使用nice()之后,
其定义域变为[0.5,0.9]。对于[0.500000543,69.99998888]这样的定义域,则自动将其变为[0,70].  
linear.ticks([count])          
//设定或获取定义域内具有代表性的值得数目。count默认为10,如果定义域[0,70],则该函数返回[0,10,20,30,40,50,60,70]。
如果count设置为3,则返回   [0,20,40,60]。该方法主要用于选取坐标轴刻度。  
linear.tickFormat(count,[format])   
//用于设置定义域内具有代表性的值得表示形式,如显示到小数点后两位,使用百分比的形式显示,主要用于坐标轴上。
 
以上方法中,linear(x)、invert()、domain()、range()是基础方法,使用形式看代码:  

1 var linear = d3.scale.linear() 2                     .domain([0,20])     //设置定义域为[0,20]
3                     .range([0,100])     //设置值域为[0,100]
4                     
5         console.log(linear(10))         //返回值50
6         console.log(linear(30))         //返回值150
7         console.log(linear.invert(80))  //返回值16

 

 
用linear()计算的结果是,输出都是输入值得5倍。而使用linear.invert()时,输出都是输入值得五分之一。要注意的是,
倒数第二行,linear()接收了一个超出定义域范围的值30,结果还是正常输出其乘以5之后的值150.此输出值也超过了值域的范围
如果不希望其超出范围,可以使用clamp(),代码如下:  

1 linear.clamp(true) 2 console.log(linear(30))         //返回值100

 
将clamp()设置为true后,超出值域的值会取值域的上下限作为输出。对于输出的数值,如果希望对其进行四舍五入,要使用rangRound()来设置:  

1  linear.rangeRound([0,100]); 2  console.log(linear(13.33))      //返回值67

 
如果不用rangeRound()重新设置值域,则输出值为66.649999999999,其四舍五入后值为67.如果定义域中有无穷小数,可用nice(),代码:  

1 linear.domain([0.123000000,0.488888888]) 2  .nice() 3         console.log(linear.domain())    //返回值[0.1,0.5]
4 
5 
6         linear.domain([33.611111,45.97745]) 7  .nice() 8         console.log(linear.domain())    //返回值[33,46]

 

应用nice()后,定义域变成了比较工整的形式,但是并不是四舍五入。最后讲解ticks()和tickFormat()的用法,它们主要是用在坐标轴上的。看代码:  

 1 var linear2 = d3.scale.linear()  2                         .domain([-20,20])  3                         .range([0,100])  4         var ticks = linear2.ticks(5);  5         console.log(ticks)              //返回值[-20, -10, 0, 10, 20]
 6 
 7         var tickFormat = linear2.tickFormat(5,\"+\");  8         for (var i = 0; i < ticks.length ; i++){  9             //ticks数组中的每一个值,都使用一次tickFormat()函数
10             ticks[i] = tickFormat(ticks[i]) 11  } 12         console.log(ticks)              //返回值[\"-20\", \"-10\", \"+0\", \"+10\", \"+20\"]

 

 
这段代码中,比例尺的定义域为[-20,20],调用ticks(5)之后返回一个数组,分别是该定义域内具有代表性的值。然后,调用tickFormat(),返回值是一个函数,因此调用时要使用函数的调用方式。最终结果是,ticks变成了设定的格式。
此外设定的格式为\"+\":表示如果是正数,则在前面添加一个加号,负数则添加一个减号。除此之外,常用的格式还有%、$等,遵循迷你语言格式规范。  
比例尺的domain()和range()最少放入两个数,可以超过两个数,但两者的数量必须相等,放入三个数的情况如下,代码:

1 var scale = d3.scale.linear(); 2         scale.domain([0,20,40]) 3             .range([0,100,150]); 4         console.log(scale(30))          //返回值125

 

 
这表示有两个线性函数,当输入的值为30时,属于domain的20~40的范围,那么输出为100~150范围。  
下一文章介绍指数比例尺和对数比例尺。            

给TA打赏
共{{data.count}}人
人已打赏
随笔日记

.net core EF Core 调用存储过程

2020-11-9 4:45:25

随笔日记

Laravel配置全局公共函数

2020-11-9 4:45:27

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索