d3 之deal with data

时间 2019-11-19

标签 d3 deal data 繁體版

原文原文链接

以前说慢慢写有关D3的笔记，结果作完那个拓扑图就没写了，今天发现关于d3的用法有点遗忘。感受有回顾一遍的必要。javascript

以前的序对D3有一个简单的介绍，下面就作一些细节的东西。主要是贴代码，顺带注释和效果图。html

<html>
<head>
    <meta charset="utf-8">
    <title>d3研究室</title>
    <style>
     .h-bar{
       width:21px;
       background-color: chartreuse;
       text-align: start;
       border:solid 1px black;
       display: inline-block;
     }
    </style>
</head>
<body>
<script src="./d3.v3.min.js" charset="utf-8"></script>
<script>
  
var  data=[];
for(var i=0;i<10;i++){
    data.push(Math.ceil(Math.random()*100));
}

var render=function(){
    //enter 计算数据与显示元素的差集，补充不足
    d3.select("body").selectAll("div.h-bar")
        .data(data)
        .enter()
        .append("div")
        .attr("class",'h-bar')
        .append("span");

    //update 更新内容
    d3.select("body").selectAll("div.h-bar")
        .data(data)
        .style("height",function(d,i){
            console.log('item'+i+":"+d);
            return (d*3)+"px";
        })
        .select("span")
        .text(function(d){
            return d;
        });
    //exit 删掉多于的元素
    d3.select("body").selectAll("div.h-bar")
        .data(data)
        .exit()
        .remove();
};

setInterval(function(){
    data.shift();
    data.push(Math.ceil(Math.random()*100))
    render();
},1500);
</script>
</body>
</html>

将函数做为数据

上面那个示例中绑定的数据是一个纯数字，其实绑定什么类型的数据并无严格的限定，彻底取决于应用场景。甚至能够将函数做为数据绑定到视图上。java

<html>
<head>
    <meta charset="utf-8">
    <title>d3研究室</title>
    <style>
      .h-bar{
     width:15px;
     background-color: chartreuse;
     text-align: right;
     border:solid 1px black;
     display: inline-block;
     margin-left:3px;
    }
    </style>
</head>
<body>
<script src="./d3.v3.min.js" charset="utf-8"></script>
<script>

var  data=[];

//生成将要绑定到视图的函数
var d_func=function(u){
    return function(x){
        return u+x*x;
    }
};

//添加新的数据
var newData=function(){
    data.push(d_func(Math.floor(Math.random()*20)));
    return data;
};

//从新渲染视图
var render=function(){

    var selection=d3.select("body").selectAll("div.h-bar")
        .data(newData());//这里也能够直接传newData这个函数，d3本身会去执行

    selection.enter()
        .append("div")
        .attr("class",'h-bar')
        .append("span");

    selection.exit()
        .remove();

    selection.attr("class","h-bar")
        .style("height",function(d,i){
            return d(i)+"px";//注意这里的d是一个函数
        })
        .select("span").text(function(d,i){
           return d(i);
        });
};

setInterval(function(){
    render();
},1500);
</script>
</body>
</html>

一些数据处理工具

filter 过滤数据，在数据反映到视图前调用，.filter(function(){return true/false;})
sort 对数据进行排序，.sort(comparator);
nest 多级聚类

var records = [
        {quantity: 2, total: 190, tip: 100, type: "tab"},
        {quantity: 2, total: 190, tip: 100, type: "tab"},
        {quantity: 1, total: 300, tip: 200, type: "visa"},
        {quantity: 2, total: 90, tip: 0, type: "tab"},
        {quantity: 2, total: 90, tip: 0, type: "tab"},
        {quantity: 2, total: 90, tip: 0, type: "tab"},
        {quantity: 1, total: 100, tip: 0, type: "cash"},
        {quantity: 2, total: 90, tip: 0, type: "tab"},
        {quantity: 2, total: 90, tip: 0, type: "tab"},
        {quantity: 2, total: 90, tip: 0, type: "tab"},
        {quantity: 2, total: 200, tip: 0, type: "cash"},
        {quantity: 1, total: 200, tip: 100, type: "visa"}
    ];

    var nest = d3.nest()
            .key(function (d) { // 第一级按type分类
                return d.type;
            })
            .key(function (d) { // 第二级按tip分类
                return d.tip;
            })
            .entries(records); // 执行分类策略
   //分类的结果，即nest的值
   {
    "key" : "tab",
    "values" : [{
            "key" : "100",
            "values" : [{
                    "quantity" : 2,
                    "total" : 190,
                    "tip" : 100,
                    "type" : "tab"
                }, {
                    "quantity" : 2,
                    "total" : 190,
                    "tip" : 100,
                    "type" : "tab"
                }
            ]
        }, {
            "key" : "0",
            "values" : [{
                    "quantity" : 2,
                    "total" : 90,
                    "tip" : 0,
                    "type" : "tab"
                }, {
                    "quantity" : 2,
                    "total" : 90,
                    "tip" : 0,
                    "type" : "tab"
                }, {
                    "quantity" : 2,
                    "total" : 90,
                    "tip" : 0,
                    "type" : "tab"
                }, {
                    "quantity" : 2,
                    "total" : 90,
                    "tip" : 0,
                    "type" : "tab"
                }, {
                    "quantity" : 2,
                    "total" : 90,
                    "tip" : 0,
                    "type" : "tab"
                }, {
                    "quantity" : 2,
                    "total" : 90,
                    "tip" : 0,
                    "type" : "tab"
                }
            ]
        }
    ]
}, {
    "key" : "visa",
    "values" : [{
            "key" : "200",
            "values" : [{
                    "quantity" : 1,
                    "total" : 300,
                    "tip" : 200,
                    "type" : "visa"
                }
            ]
        }, {
            "key" : "100",
            "values" : [{
                    "quantity" : 1,
                    "total" : 200,
                    "tip" : 100,
                    "type" : "visa"
                }
            ]
        }
    ]
}, {
    "key" : "cash",
    "values" : [{
            "key" : "0",
            "values" : [{
                    "quantity" : 1,
                    "total" : 100,
                    "tip" : 0,
                    "type" : "cash"
                }, {
                    "quantity" : 2,
                    "total" : 200,
                    "tip" : 0,
                    "type" : "cash"
                }
            ]
        }
    ]
}
]