d3之操作数组三 (nest)

d3之操作数组一 (统计，检索，变换)
d3之操作数组二 (map与set)
嵌套(nest)允许将数组中的元素分组为分层树结构；可以将其像SQL中的GROUP BY运算符一样，除了可以进行多个级别的分组，并且结果输出是树而不是平面表。树中的级别由key functions指定。树的叶节点可以按值排序，而内部节点可以按键排序。可选的汇总功能将使用摘要功能折叠每个叶节点中的元素。嵌套运算符（嵌套返回的对象）是可重用的，并且不保留对嵌套数据的任何引用。

nest.entries()返回一个键值对的数组

var dataset=[
     {familyname:"化妆品",categoryname:"护肤",productname:"化妆水",price:100,quantity:300},
     {familyname:"化妆品",categoryname:"护肤",productname:"BB霜",price:500,quantity:20},
     {familyname:"电器",categoryname:"家电",productname:"冰箱",price:3200,quantity:300},
     {familyname:"电器",categoryname:"家电",productname:"洗衣机",price:2100,quantity:20}
 ];
var nest_entries=d3.nest()
        .key(function(d){return d.familyname;})
        .rollup(function(leaves){
            return d3.max(leaves,function(d){
                return d.quantity;
            });
        })
        .entries(dataset);

首先会将dataset 以familyname为类别进行分组：

{
        "化妆品":{
            "护肤":[
                {name:"化妆水",price:100,quantity:300},
                {name:"BB霜",price:3230,quantity:20}
            ]
        },
        "电器":{
            "家电":[
                {name:"冰箱",price:2100,quantity:300},
                {name:"洗衣机",price:3230,quantity:20}
            ]
        }
    };

然后rollup方法，会找每个familyname（化妆品，电器）下的叶子节点quantity最大的值，无疑是300.所以以上的结果如下：

p1.png

nest.map()返回$key，value的大的对象

var nest_map=d3.nest()
            .key(function(d){return d.familyname;})
            .map(dataset);

这个就跟上节的map方法一样，返回一个$key,value数组的大的对象：

p2.png

nest.object()返回一个对象

一层分类

var nest_object=d3.nest()
            .key(function(d){return d.familyname;})
            .rollup(function(leaves){
                return d3.sum(leaves,function(d){
                    return d.quantity;
                });
            })
            .object(dataset);
    console.log(nest_object);

p3.png

两层嵌套分类

var nest_object2=d3.nest()
            .key(function(d){return d.familyname;})
            .key(function(d){return d.productname;})
            .rollup(function(leaves){
                return d3.sum(leaves,function(d){
                    return d.quantity;
                });
            })
            .object(dataset);
    console.log(nest_object2);

p4.png

d3之操作数组一 (统计，检索，变换)
d3之操作数组二 (map与set)

d3之操作数组 三 (nest)

推荐阅读更多精彩内容

d3之操作数组三 (nest)