设为首页 加入收藏

TOP

D3.js比例尺 定量比例尺 之 线性比例尺(v3版本)(一)
2019-09-17 18:15:22 】 浏览:42
Tags:D3.js 比例尺 定量 线性 版本
定量比例尺 :
数学上有函数的概念,不是编程中所说的函数,如线性函数、指数函数、对数函数等,而指的是一个量随着另一个量的变化而变化。 例如有一下线性函数 : 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"]

 

首页 上一页 1 2 下一页 尾页 1/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇Javascript常用正则表达式 下一篇解决incorrect 'only availab..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目