数组时一种常用的数据结构,通常是由相同数据类型的项组成集合,拥有数组名,可以凭借数组名和下标来访问数组项。虽然JavaScript允许一个数组中存在不同的数据类型,但实际很少这样使用。需要被可视化的数据常以数组的形式存在,虽然JavaScript中提供了不少操作数组的方法,但JavaScript不是为了数据可视化而存在的。因此,D3数据可视化的需求封装了不少数组处理函数。
一 排序 :
排序的方法:
d3.ascending(a,b);
//递增函数。如果a小于b,则返回-1;如果a大于b,返回1;如果a等于b,返回0;
d3.descending(a,b);
//递减函数。如果a大于b,则返回-1;如果a小于b,返回1;如果a等于b,返回0;
之前给大家说过对选择集使用sort()方法。但是如果不指定比较函数的情况下,默认是d3.ascending。 这是D3提供的一个递增函数。其实D3给我们提供了递增和递减两个比较函数。比较函数的规则是 :有函数function(a,b),
如果要使a位于b之前,则返回值小于0;
如果要使a位于b之后,则返回值大于0;
如果a与b相等,则返回值为0;
d3.ascending(a,b);
//递增函数。如果a小于b,则返回-1;如果a大于b,返回1;如果a等于b,返回0;举个例子 :
var numList = [22,44,33,11,66]; numList.sort(d3.ascending); //注意 : 此处的sort()方法使JavaScript的数组方法对象(Array)的方法,不是D3的selection.sort()方法。 console.log(numList) //[11,22,33,44,66]
d3.descending(a,b);
//递减函数。如果a大于b,则返回-1;如果a小于b,返回1;如果a等于b,返回0;再举个例子 :
var numList = [22,44,33,11,66];
numList.sort(d3.descending); //注意 : 此处的sort()方法使JavaScript的数组方法对象(Array)的方法,不是D3的selection.sort()方法。
console.log(numList) //[66,44,33,22,11]
二 求值 :
求值的方法:
d3.min(array[,accessor])
//返回数组的最小值
d3.max(array[,accessor])
//返回数组的最大值
d3.extent(array[,accessor])
//返回数组最小值和最大值
d3.sum(array[,accessor])
//返回数组的总和,如果数据为空,则返回0。
d3.mean(array[,accessor])
//返回数组的平均值,如果数组为空,则返回undefined
d3.median(array[,accessor])
//求数组的中间值,如果数组为空,则返回undefined。
d3.quantile(numbers,p)
//求取p分位点的值,p的范围为[0,1]。数组需先递增排序。
d3.variance(array[,accessor])
//求方差
d3.deviation(array,[,accessor])
//求标准差
d3.bisectLeft()
//获取某数组项左边的位置
d3.bisect()
//获取某数组项右边的位置
求取数组的最大值、最小值、中间值、平均值等。在D3中,这一类函数形如 :
d3.function(array,[,accessor]);
其中,第一个参数array是数组,第二个参数是accessor是可选参数。accessor是一个函数,指定之后,数组各项首先会调用accessor,然后再使用原函数function进行处理。
d3.min(array[,accessor])
//返回数组的最小值
d3.max(array[,accessor])
//返回数组的最大值
d3.extent(array[,accessor])
//返回数组最小值和最大值
以上三个函数的参数有两个:必选参数array和可选参数accessor。其中,array中的undefined会自动被忽略。举个例子:
//定义数组 var numbers = [30,20,50,10,80,60] //求最小值和最大值 var min = d3.min(numbers) var max = d3.max(numbers) var extent = d3.extent(numbers) //输出结果 console.log(min) //10 console.log(max) //80 console.log(extent) //[10,80] //使用accessor,在求值之前先出来了数据 var minAcc = d3.min(numbers,function(d){return d*3}) var maxAcc = d3.max(numbers,function(d){return d-1}) var extentAcc = d3.extent(numbers,function(d){return d%7}) //输出结果 console.log(minAcc) //30 console.log(maxAcc) //79 console.log(extentAcc) //[1,6]
上面代码中,先是在不指定accessor的情况下,调用了最大值和最小值的三个函数。然后在指定accessor的情况下,再次调用了三个函数。以d3.min为例讲解一下accessor的用法 :对于以上函数,numbers数组中的每一项都会先调用此函数,即每一项都乘以3.调用之后数组变为[90,60,150,30,240,180],然后再求此数组的最小值,结果为30。d3.extent()相当于分别调用d3.min()和d3.max(),返回值是一个数组,第一项是最小值,第二项是最大值。