一、定量比例尺
2017-10-24 本文已影响70人
陆lmj
比例尺：就像函数一样，将一个量转换为另一个量，定义域到值域的转换。
每个比例尺都需要指定一个domain(定义域)和range(值域)。
定量比例尺：定义域是连续的。值域有连续的也有离散的。
1、线性比例尺(Linear Scale)
- d3.scale.linear()：创建一个线性比例尺。
- linear(x)：输入一个在定义域内的值x，返回值域内对应的值。
- linear.invert(y) ：输入值域，返回定义域
- linear.domain([numbers])： 设定或获取定义域，最少放入两个数，也可以超过两个数，但domain和range的数量必须相等。
- linear.range([values])：设定或获取值域，最少放入两个数，也可以超过两个数，但domain和range的数量必须相等。
- linear.rangeRound([valuses])： 输出值会进行四舍五入的运算，结果是整数
- linear.clamp([boolean])：默认被设置为false，当该比例尺接受一个超出定义域范围内的值时，依然能够按照同样的计算方法计算得到一个值，该值可能是超出值域范围的。设置为true时，任何超出值域范围的值，都会被收缩到值域范围内。
- linear.nice([count])：将定义域的范围扩展成理想状态，例如对于[0.50000543,69.99997766]这样的定义域会自动将其变为[0,70].
- linear.ticks([ticks]) ：设定或获取定义域内具有代表性的值的数目。默认是10 ，主要用于选取坐标刻度
- linear.ticksFormat(count,[format])： 设置定义域内具有代表的值的表示形式，如显示到小数点后两位，使用百分比的形式显示，主要用于坐标轴上。
var linear = d3.scale.linear()
.domain([0,20])
.range([0,100]);
console.log( linear(10) ); //输出50
console.log( linear(30) ); //输出150
console.log( linear.invert(80) ); //输出16
linear.clamp(true);
console.log( linear(30) ); //输出100
linear.rangeRound([0,100]);
console.log( linear(13.33) ); //输出67，对结果进行了四舍五入
//使用nice之后，定义域变成了比较工整的形式，但是并不是四舍五入
linear.domain([0.12300000,0.4888888888]).nice();
console.log( linear.domain() ); //输出[0.1,0.5]
linear.domain([33.611111,45.97745]).nice();
console.log( linear.domain() ); //输出[33,46]
var linear = d3.scale.linear()
.domain([-20,20])
.range([0,100]);
var ticks = linear.ticks(5);
console.log(ticks); //输出数组[-20,-10,0,10,20]
var tickFormat = linear.tickFormat(5,"+");//设定的格式为"+":表示如果是正数，则在前面添加一个加号，负数则添加一个减号。
for(var i=0;i<ticks.length;i++){
ticks[i] = tickFormat(ticks[i]);
}
console.log(ticks); //输出["-20","-10","+0","+10","+20"]
2、指数(Power Scale)和对数比例尺(Log Scale)
指数比例尺和对数比例尺的方法和线性比例尺一样，但指数比例尺多一个exponent()，对数比例尺多一个base()，两者都是用于指定底数。
var pow = d3.scale.pow().exponent(3); //设置指数比例尺的指数为3
console.log( pow(2) ); //输出为8
console.log( pow(3) ); //输出为27
pow.exponent(0.5);
console.log( pow(2) ); //输出为1.414
console.log( pow(3) ); //输出为1.732
//指定domain和range
//指数比例尺
var pow = d3.scale.pow()
.exponent(3)
.domain([0,3]) //指数比例尺内部调用了线性比例尺，而且把这个线性比例尺
.range([0,90]); //定义域的边界变为了其指定的次方。即定义域为[0,27]
//线性比例尺
var linear = d3.scale.linear()
.domain([0,Math.pow(3,3)])
.range([0,90]);
console.log( pow(1.5) ); //输出为11.25
console.log( linear(Math.pow(1.5,3)) ); //输出为11.25
3、量子(Quantize Scale)和分位比例尺(Quantile Scale)
- 量子比例尺
定义域是连续的，值域是离散的。例如：定义域：[0,10]，值域：["red","green","blue","yellow", "black"]，使用量子比例尺之后，定义域被分割为5段，每一段对应值域的一个值，[0,2)对应red，[2,4)对应green，依此类推，所以量子比例尺很适合处理类似“数值对应颜色”的问题。
var quantize = d3.scale.quantize()
.domain([50,0])
.range(["#888","#666","#444","#222","#000"]);
- 分位比例尺
与量子比例尺类似，也是用于将连续的定义域区域分成段，每段对应到一个离散的值上，不同的是分段处的值，量子比例尺的分段值只与定义域的起始值和结束值有关，其中间有多伤其他数值都没有影响，分段值取其算数平均值，分位比例尺的分段值与定义域中存在的数值都有关，可使用quantile.quantiles()查询分位比例尺的分段值。
var quantize = d3.scale.quantize().domain([0,2,8,10]).range([1,100]), //[0,5)对应1，[5,10]对应100
quantile = d3.scale.quantile().domain([0,2,4,10]).range([1,100]);//[0,3)对应1，[3,10]对应100
console.log( quantize(4.99) );//量子比例尺，输出1
console.log( quantize(5) );//量子比例尺，输出100
console.log( quantile(2.99) );//分位比例尺，输出1
console.log( quantile(3) );//分位比例尺，输出100
4、阈值比例尺
阈值比例尺：通过设定阈值，将连续的定义域映射到离散的值域里，
//该阈值比例尺定义了三个阈值：10、20、30，则空间被划分为四段：负无穷到10，10到20，20到30，30到正无穷
var threshold = d3.scale.threshold()
.domain([10,20,30])
.range(["red","green","blue","black"]);
console.log( threshold(5) ); //输出red
console.log( threshold(15) ); //输出green
console.log( threshold(25) ); //输出blue
console.log( threshold(35) ); //输出black
console.log( threshold.invertExtent("red") ); //输出[undefined,10]
console.log( threshold.invertExtent("green") ); //输出[10,20]
console.log( threshold.invertExtent("blue") ); //输出[20,30]
console.log( threshold.invertExtent("black") ); //输出[30,undefined]
