d3初級(jí)教程之data的Key函數(shù)

enda 發(fā)布于2019-08-21 12:12 / 2986人閱讀

摘要：一開(kāi)始用一直都沒(méi)留意到還有個(gè)參數(shù)后來(lái)剛接觸到函數(shù)就有些讓我迷惑了再后來(lái)發(fā)現(xiàn)這的確是個(gè)神器呀巴拉巴拉巴拉廢話不多說(shuō)讓我們通過(guò)一個(gè)簡(jiǎn)單的來(lái)認(rèn)識(shí)一下它在一個(gè)空白頁(yè)添加下面代碼樣式三個(gè)天藍(lán)色小藍(lán)條登場(chǎng)分別是寬度為的元素我們?cè)谥刑砑尤缦麓a并運(yùn)行情況

一開(kāi)始用D3.data()一直都沒(méi)留意到還有個(gè)Key參數(shù),后來(lái)剛接觸到key函數(shù)就有些讓我迷惑了,再后來(lái)發(fā)現(xiàn)這的確是個(gè)神器呀.巴拉巴拉巴拉...廢話不多說(shuō),讓我們通過(guò)一個(gè)簡(jiǎn)單的demo來(lái)認(rèn)識(shí)一下它.
在一個(gè)空白頁(yè)添加下面代碼
樣式:

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,.三個(gè)天藍(lán)色小藍(lán)條登場(chǎng),分別是寬度為100px, 200px, 300px的div元素

1,我們?cè)趈s中添加如下代碼并運(yùn)行:

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

ok,情況大致你能猜到,第一條小藍(lán)條留了下來(lái),后面兩條被干掉了,觀察留下的藍(lán)條 data 屬性,是3

2, 將1中添加的代碼換成下面的并運(yùn)行:

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

細(xì)心的你能發(fā)現(xiàn),我們只是給selection.data()添加了一個(gè)Key函數(shù)
這時(shí)神奇的事情出現(xiàn)了,前兩條藍(lán)條被干掉留下了第三條.藍(lán)條的 data屬性任然是3

完畢,思考半分鐘,你想到了沒(méi)有,其實(shí)總的來(lái)說(shuō)data的key函數(shù)參數(shù),提供了一種,由data到selection的映射關(guān)系.
希望我的文章能幫助到你,更多資料請(qǐng)翻閱d3js.org,我是朱現(xiàn)明,任職于精碩科技可視化部門(mén)前端開(kāi)發(fā),更多精彩的文章即將奉上.

[email protected]