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,我是朱现明,任职于精硕科技可视化部门前端开发,更多精彩的文章即将奉上.

---

[e-mail]