一开始用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