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 相关文章推荐
JS短路原理的应用示例 精简代码的途径
Dec 13 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
详解Vue串联过滤器的使用场景
Apr 30 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
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使用百度翻译api示例分享
2014/01/31 PHP
ThinkPHP视图查询详解
2014/06/30 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
Git命令之分支详解
2021/03/02 PHP
js 方法实现返回多个数据的代码
2009/04/30 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
CSS3 文字动画效果
2020/11/12 HTML / CSS
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
八年级物理教学反思
2014/01/19 职场文书
本科毕业生求职信
2014/06/15 职场文书
个人查摆剖析材料
2014/10/04 职场文书
资料员岗位职责
2015/02/10 职场文书
Spring Security使用单点登录的权限功能
2022/04/03 Java/Android
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers