d3初級教程之data的Key函數

一開始用D3.data()一直都沒留意到還有個Key參數,後來剛接觸到key函數就有些讓我迷惑了,再後來發現這的確是個神器呀.巴拉巴拉巴拉...廢話很少說,讓咱們經過一個簡單的demo來認識一下它.
在一個空白頁添加下面代碼
樣式:

div {
            margin: 10px 10px;
            height: 20px;
            background: #0055ff;
        }

js:

var dataset = [1, 2, 3];
    var divs = d3.select("body")
            .selectAll("div")
            .data(dataset)
            .enter()
            .append("div")
            .style("width", function (d) {
                return d * 100 + "px";
            });

ok,.三個天藍色小藍條登場,分別是寬度爲100px, 200px, 300px的div元素

1,咱們在js中添加以下代碼並運行:

function change() {
        dataset = [3];
        divs.data(dataset)
            .exit()
            .remove();
    }
    setTimeout(change, 2000)

ok,狀況大體你能猜到,第一條小藍條留了下來,後面兩條被幹掉了,觀察留下的藍條 data 屬性,是3

2, 將1中添加的代碼換成下面的並運行:

function change() {
    dataset = [3];
    divs.data(dataset, function(d) {
        return d;
    })
        .exit()
        .remove();
}
setTimeout(change, 2000);

細心的你能發現,咱們只是給selection.data()添加了一個Key函數
這時神奇的事情出現了,前兩條藍條被幹掉留下了第三條.藍條的 data屬性任然是3

完畢,思考半分鐘,你想到了沒有,其實總的來講data的key函數參數,提供了一種,由data到selection的映射關係.
但願個人文章能幫助到你,更多資料請翻閱d3js.org,我是朱現明,任職於精碩科技可視化部門前端開發,更多精彩的文章即將奉上.

---

zhuxianming@admaster.com.cn