欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-05 10:58:09
嵌套结构(Nest) : 涉及的方法有: d3.nest() //该函数没有任何参数,表示接下来将会构建一个新的嵌套结构。其他函数需要跟在此函数之后一起使用。 nest.key(function) //指定嵌套结构的键 nest.entries(array) //指定数组array将被用于构建嵌套结 ......
嵌套结构(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)对数组中的大量对象进行分类,多个键一层套一层,使得分类越来越具体,索引越来越方便。假设现有数组,如图 :
D3.js的基础部分之数组的处理  嵌套结构(Nest)(v3版本)
 
 
对于这样一个数组的,可以使用各value中的某些数据作为键(key),例如如果要在几千个职员数据中查找其中一个职员的信息,但是只知道其出生地和年龄分别为北京和23岁,一般来说这么查找比较简单:先查找在北京的职员,再在其中查找22的职员。如此查找可一步步缩小范围,那么出生地和年龄即可作为嵌套结构的键(key),如图:
经过分类后,要查找某一个元素时,即可首先根据键缩小范围。
D3.js的基础部分之数组的处理  嵌套结构(Nest)(v3版本)
 
 
通过代码来实践一下上述函数的使用方法:
 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为嵌套结构的键,要注意他们出现的顺序是会影响到结果的!
 
返回值为:
D3.js的基础部分之数组的处理  嵌套结构(Nest)(v3版本)
如果使用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)

 输出结果为:

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

 

 

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)

 输出结果为:

D3.js的基础部分之数组的处理  嵌套结构(Nest)(v3版本)
 
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)

 

使用映射后,返回的结果为: 
 
D3.js的基础部分之数组的处理  嵌套结构(Nest)(v3版本)
 
可以看到,使用映射的方式输出时,其结果的最外层是一个花括号,而不是中括号。即它是一个对象,而不是一个数组。内部的形式也有很多不同之处,请注意区别!