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

嵌套结构(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)

 输出结果为:

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

 

 

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)

 

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

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄