D3.js的基础部分之数组的处理数组的排序和求值(v3版本)


Posted in Javascript onMay 09, 2019

数组的处理 :

数组时一种常用的数据结构,通常是由相同数据类型的项组成集合,拥有数组名,可以凭借数组名和下标来访问数组项。虽然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(),返回值是一个数组,第一项是最小值,第二项是最大值。

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()是如何使用的 :

//数组定义
  var numbers = [2,8,15]
  numbers.sort(d3.ascending);
  console.log(d3.quantile(numbers,0))   //返回2
  console.log(d3.quantile(numbers,0.25))  //返回5
  console.log(d3.quantile(numbers,0.5))  //返回8
  console.log(d3.quantile(numbers,0.75))  //返回11.5
  console.log(d3.quantile(numbers,0.9))  //返回13.599999999999998
  console.log(d3.quantile(numbers,1.0))  //返回15

这段代码的数组中,2位于0分位处,8位于0.5分位处,15位于1分位处。d3.median()其实相当于是将数组中的无效值(undefined和NaN)去掉之后,再使用d3.quantile()获取0.5分位处的值。

接下来看一下使用d3.median()的例子:

//定义数组
     var numbers1 = [3,5,9,undefined,11,NaN];
     console.log(d3.median(numbers1))  //返回7
     var numbers2 =[3,5,9,undefined,11,NaN,17];
     console.log(d3.median(numbers2))  //返回9

d3.variance(array[,accessor])
 //求方差
d3.deviation(array,[,accessor])
 //求标准差

方差和标准方差用于度量随机变量和均值之间的偏离程度,在概率统计中经常用到。其中标准差是方差的二次方根。这两个值越大,表示此随机变量均值的程度越大。这两个函数的参数为必选参数array和可选参数accessor,并且都会忽略数组array中的undefined和NaN。请看代码 :

//定义数组
    var numbers1 = [1,9,7,9,5,8,9,10]
    console.log(d3.mean(numbers1))     //返回平均值7.25
    console.log(d3.variance(numbers1))   //返回方差值 约8.79
    console.log(d3.deviation(numbers1))   //返回标准差值 约2.96

    var numbers2 = [7,8,6,7,7,8,8,7];
    console.log(d3.mean(numbers2))     //返回平均值7.25
    console.log(d3.variance(numbers2))   //返回方差值 约0.5
    console.log(d3.deviation(numbers2))   //返回标准差值 约0.71

这段代码中,数组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()是怎样插入数组项的:

//定义数组
    var dataList = ["China","America","Japan","France"]
    //在数组索引为1的位置处,删除0个项后,插入字符串Germany
    dataList.splice(1,0,"Germany");
    //再来打印一下新数组
    console.log(dataList)  //输出 ["China", "Germany", "America", "Japan", "France"]
    //在数组索引为3的位置处,删除一个项后,插入两个字符串Britain和Russis
    dataList.splice(3,1,"Britain","Russis")
    //再来打一下新数组
    console.log(dataList)  //输出["China", "Germany", "America", "Britain", "Russis", "France"]

splice()可用于删除数组项,也可以用于插入数组项。

接下来看看d3.bisectLeft()的使用方法 :

//定义数组
    var numbers = [10,13,16,19,22,25]

    //获取16左边在数组中的位置
    var iLeft = d3.bisectLeft(numbers.sort(d3.ascending),16);
    console.log(iLeft) //2

    // 在iLeft位置处,删除0项,出入66
    numbers.splice(iLeft,0,66)
    //打印新数组
    console.log(numbers)  [10, 13, 66, 16, 19, 22, 25]

这段代码中,将numbers排序后,在使用bisectLeft()获取了16左边的位置。bisectLeft()所使用的数组必须经过=递增排序。第二个参数用于指定某项的位置,如果此项在数组中存在,则返回此位置的左边。如果此项在数组中不存在,则返回第一个大于此项的值得左边。举个例子 :

//定义数组
    var numbers = [10,13,16,19,22,25]
    //18在数组中不存在,返回介于16和19之间的位置
    var iLeft = d3.bisectLeft(numbers.sort(d3.ascending),18)
    console.log(iLeft) //返回值为3
    numbers.splice(iLeft,0,77);

    //打印新数组
    console.log(numbers) //输出[10, 13, 16, 77, 19, 22, 25]

bisect()和bisectRight()是一样的,和bisectLeft()类似,只是获取的是指定项右边的位置。

总结

以上所述是小编给大家介绍的D3.js的基础部分之数组的处理数组的排序和求值(v3版本) ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
jQuery实现动画效果的实例代码
May 07 Javascript
jquery map方法使用示例
Apr 23 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
详解cordova打包成webapp的方法
Oct 18 Javascript
详解 微信小程序开发框架(MINA)
May 17 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
JavaScript实现网页计算器功能
Oct 29 Javascript
JS原型与继承操作示例
May 09 #Javascript
详解微信小程序回到顶部的两种方式
May 09 #Javascript
jquery登录的异步验证操作示例
May 09 #jQuery
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 #Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 #Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 #Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 #Javascript
You might like
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
ThinkPHP安装和设置
2015/07/27 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
传智播客学习之java 反射
2009/11/22 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
js验证账户名是否重复
2020/05/26 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
单利模式及python实现方式详解
2018/03/20 Python
python实现爬取图书封面
2018/07/05 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
django自带调试服务器的使用详解
2019/08/29 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
印度民族服装购物网站:BIBA
2019/08/05 全球购物
关于梦想的演讲稿
2014/05/05 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
致运动员的广播稿
2015/08/19 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书