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)

 输出结果为:

 

 

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)

 

使用映射后，返回的结果为: 

 

 

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