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"
                }
            ]
        }
    ]
}
]

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。