首页 > > 网页制作 > Javascript >

D3.js的基础部分之数组的处理 嵌套结构(Nest)(v…

2019-05-08 07:25:10来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

嵌套结构(Nest) :
 
涉及的方法有:
d3.nest() 　　　　　　　　　　
//该函数没有任何参数，表示接下来将会构建一个新的嵌套结构。其他函数需要跟在此函数之后一起使用。
 
nest.key(function) 　　　　　　
//指定嵌套结构的键
 
nest.entries(array)　　　　　　
//指定数组array将被用于构建嵌套结构
 
nest.sortKeys(comparator)　　
//按照键对嵌套结构进行排序，接在nest.key()后使用。
 
nest.sortValues(comparator)　  
//按照值对嵌套结构进行排序
 
nest.rollup(function) 　　　　　
//对每一组叶子节点调用指定的函数function,该函数含有一个参数values，是当前叶子节点的数组。
 
nest.map(array[,mapType]) 　 
//以映射的形式输出数组
 
嵌套结构能够使用键(key)对数组中的大量对象进行分类，多个键一层套一层，使得分类越来越具体，索引越来越方便。假设现有数组，如图 :
 
 
对于这样一个数组的，可以使用各value中的某些数据作为键(key)，例如如果要在几千个职员数据中查找其中一个职员的信息，但是只知道其出生地和年龄分别为北京和23岁，一般来说这么查找比较简单:先查找在北京的职员，再在其中查找22的职员。如此查找可一步步缩小范围，那么出生地和年龄即可作为嵌套结构的键(key)，如图:
经过分类后，要查找某一个元素时，即可首先根据键缩小范围。
 
 
通过代码来实践一下上述函数的使用方法:
 1  //定义一个数组
 2         var dataList = [
 3             { id: 100, name: "张某某", year: 1989, hometown: "北京" },
 4             { id: 101, name: "李某某", year: 1987, hometown: "北京" },
 5             { id: 102, name: "王某某", year: 1988, hometown: "上海" },
 6             { id: 103, name: "赵某某", year: 1987, hometown: "广州" },
 7             { id: 104, name: "孙某某", year: 1989, hometown: "上海" }
 8         ]
 9 
10         var nest = d3.nest()
11             //将year作为第一个键
12             .key(function (d) { return d.year })
13             //将hometown作为第二个键
14             .key(function (d) { return d.hometown })
15             //指定将应用嵌套结构的数组为dataList
16             .entries(dataList)
17 
18         console.log(nest)

 

上述代码分别制定year和hometown为嵌套结构的键，要注意他们出现的顺序是会影响到结果的！
 
返回值为：
如果使用sortValues()将数组按age排序并输出成嵌套结构，代码可为:
 1 var dataList2 = [
 2             { sex: "男", age: 48, name: "张某某" },
 3             { sex: "男", age: 42, name: "李某某" },
 4             { sex: "男", age: 45, name: "王某某" },
 5             { sex: "女", age: 33, name: "赵某某" },
 6             { sex: "女", age: 31, name: "孙某某" }
 7         ]
 8         //如果使用sortValues()将数组按age排序并输出成嵌套结构，可使用一下代码:
 9         var nest2 = d3.nest()
10             .key(function (d) { return d.sex })
11             .sortValues(function (a, b) {
12                 return d3.ascending(a.age, b.age)
13             })
14             .entries(dataList2)
15         //则以sex为键的每一个分组的元素，都将按照age进行递增排序。
16         console.log(nest2)

 输出结果为:

 

 

1 //nest.sortKeys(comparator)的使用
2         d3.nest()
3             .key(function(d){return d.year})
4             .sortKeys(d3.descending)    //按照year进行排序
5             .key()  //定义其他的键
rollup()的参数是一个无名函数function()，设定之后，各元素分组都会调用。在上面代码的基础上添加rollup()之后，嵌套结构的定义如下所示:
var nest3 = d3.nest()
            .key(function (d) { return d.sex })
            .rollup(function (values) { return values.length })
            .entries(dataList2)
        console.log(nest3)

 输出结果为:

 
values的原值是该分组的数组，在这里通过rollup()将其变为了该分组元素的数量。如果想将结果输出为映射形式，可以使用nest.map()，代码:
1 var map = d3.nest()
2             .key(function (d) { return d.sex })
3             .map(dataList2, d3.map)
4 
5         console.log(map)

 

使用映射后，返回的结果为: 
 
 
可以看到，使用映射的方式输出时，其结果的最外层是一个花括号，而不是中括号。即它是一个对象，而不是一个数组。内部的形式也有很多不同之处，请注意区别!
 
 
 

原文链接:https://www.cnblogs.com/littleSpill/p/10815641.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：javascript 对象的创建与继承 

下一篇：ES6的强大变量声明

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签