时间:2021-05-28
数组的处理 :
数组时一种常用的数据结构,通常是由相同数据类型的项组成集合,拥有数组名,可以凭借数组名和下标来访问数组项。虽然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;举个例子 :
d3.descending(a,b);
//递减函数。如果a大于b,则返回-1;如果a小于b,返回1;如果a等于b,返回0;再举个例子 :
二 求值 :
求值的方法:
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会自动被忽略。举个例子:
上面代码中,先是在不指定accessor的情况下,调用了最大值和最小值的三个函数。然后在指定accessor的情况下,再次调用了三个函数。以d3.min为例讲解一下accessor的用法 :对于以上函数,numbers数组中的每一项都会先调用此函数,即每一项都乘以3.调用之后数组变为[90,60,150,30,240,180],然后再求此数组的最小值,结果为30。d3.extent()相当于分别调用d3.min()和d3.max(),返回值是一个数组,第一项是最小值,第二项是最大值。
d3.sum(array[,accessor])
//返回数组的总和,如果数据为空,则返回0。
d3.mean(array[,accessor])
//返回数组的平均值,如果数组为空,则返回undefined
以上连个函数的参数同样是:必选参数array和可选参数accessor。array中无效的值undefined和NaN会被忽略。举个例子 :
//数组定义 var numbers = [30,20,undefined,50,10,80,60,NaN] //求总和与平均值 var sum = d3.sum(numbers,function(d){return d-10}) var mean = d3.mean(numbers) //输出结果 console.log(sum) //190 console.log(mean) //41.666666666666664上面代码中,数组内有undefined和NaN,但是对于函数的使用是不受影响的。
var mean = d3.mean(numbers) //数组中的数据总和除以6,而并非数组的length。而是除以去掉无效数值之后的有效长度。
d3.median(array[,accessor])
//求数组的中间值,如果数组为空,则返回undefined。
d3.quantile(numbers,p)
//求取p分位点的值,p的范围为[0,1]。数组需先递增排序。
d3.median()参数为 : 数组array和可选参数accessor。与d3.sum()和d3.mean()一样,会忽略掉undefined和NaN。如果数组的有效长度为奇数,则中间值为数据经过递增排序之后位于正中间的值;如果有效长度为偶数,则中间值为经过递增排序后位于正中间的两个数的平均值。d3.median()其实是使用d3.quantile()实现的。d3.quantile()接受两个参数:第一个是经过递增排序后的数组;第二个是分位点,范围是[0,1]。先看一下d3.quantile()是如何使用的 :
这段代码的数组中,2位于0分位处,8位于0.5分位处,15位于1分位处。d3.median()其实相当于是将数组中的无效值(undefined和NaN)去掉之后,再使用d3.quantile()获取0.5分位处的值。
接下来看一下使用d3.median()的例子:
d3.variance(array[,accessor])
//求方差
d3.deviation(array,[,accessor])
//求标准差
方差和标准方差用于度量随机变量和均值之间的偏离程度,在概率统计中经常用到。其中标准差是方差的二次方根。这两个值越大,表示此随机变量均值的程度越大。这两个函数的参数为必选参数array和可选参数accessor,并且都会忽略数组array中的undefined和NaN。请看代码 :
这段代码中,数组numbers1和numbers2的平均值都是7.25,但是前者的方差和标准差分别为8.79和2.96,后者的方差和标准差分别为0.50和0.71,表明数组numbers1中的值偏离平均值7.25的程度较大。
d3.bisectLeft()
//获取某数组项左边的位置
d3.bisect()
//获取某数组项右边的位置
d3.bisectRight()
//和d3.bisect() ,获取某数组项右边的位置
有时候需要对数组中指定的位置插入项,因此需要获取指定的位置。在JavaScript中,要向某数组插入项,可使用splice(),而bisectLeft()、bisect()和bisectRight()可配合splice()使用。首先来看一下,splice()是怎样插入数组项的:
splice()可用于删除数组项,也可以用于插入数组项。
接下来看看d3.bisectLeft()的使用方法 :
这段代码中,将numbers排序后,在使用bisectLeft()获取了16左边的位置。bisectLeft()所使用的数组必须经过=递增排序。第二个参数用于指定某项的位置,如果此项在数组中存在,则返回此位置的左边。如果此项在数组中不存在,则返回第一个大于此项的值得左边。举个例子 :
bisect()和bisectRight()是一样的,和bisectLeft()类似,只是获取的是指定项右边的位置。
总结
以上所述是小编给大家介绍的D3.js的基础部分之数组的处理数组的排序和求值(v3版本) ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前言D3.js是一个帮助开发者操纵基于数据的文档的JavaScript类库,在《D3.js实现柱状图的方法详解》中已经给大家介绍过如何用D3.js来实现一个简单
前言再简单介绍下D3.js,D3.js是一个基于数据操作文档JavaScript库。D3帮助你给数据带来活力通过使用HTML、SVG和CSS。D3重视Web标准
D3.js介绍D3.js是一个基于数据操作文档JavaScript库。D3帮助你给数据带来活力通过使用HTML、SVG和CSS。D3重视Web标准为你提供现代浏
这节课讲解webpack4中打包css的应用。v4版本和v3版本并没有特别的出入。1.准备工作众所周知,CSS在HTML中的常用引入方法有标签和标签两种,所以这
如何安装小蚕豆V3软件到电脑?小蚕豆小编教大家怎样把小蚕豆V3版本软件安装到电脑本地!不少用户在下载好U盘启动盘制作工具以后,不会安装?有些用户竟然直接把小蚕豆