嵌套結構(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)對數組中的大量對象進行分類,多個鍵一層套一層,使得分類越來越具體,索引越來越方便。假設現有數組,如圖 :


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為嵌套結構的鍵,要註意他們出現的順序是會影響到結果的! 返回值為:

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)
輸出結果為:

1 var map = d3.nest()
2 .key(function (d) { return d.sex })
3 .map(dataList2, d3.map)
4
5 console.log(map)
使用映射後,返回的結果為:
