d3 中exit() remove()正确工作的方式

在官网中给出的代码［1］是有问题的，如下的代码并不能正常工作：

// Update…
var p = d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
    .text(String);

// Enter…
p.enter().append("p")
    .text(String);

// Exit…
p.exit().remove();

结合参考文献［2］，正确的工作方式有两种：

var bandMates = 
[
   {  "name":"John", "songs":302 },
   {  "name":"Paul", "songs":300 },
   {  "name":"George", "songs":231},
   {  "name":"Pete", "songs":12 }
];


function draw(){
    var content = d3.select("#graph").selectAll("div.member")
        .data(bandMates, function(d){return d.name;});

    var contentEnter = content.enter()
            .append("div")
            .classed("member",true);
    
    contentEnter
        .append("div")
        .text(function(d) { return d.name; });
    
    contentEnter
        .append("div")
        .style("height", "40px")
        .style("width", "0px")
        .style("background-color", "#ff9999")
        .transition()
            .duration(1000)
            .style("width", function (d){ return d.songs + "px";});
    
    contentEnter
        .append("div")
        .text(function(d) { return "wrote " + d.songs + " songs!"; });
    
   ／／方式1 
　　content.exit();
    content.transition().delay(1000).remove();
   ／／方式2
　　d3.select("#graph").selectAll("div.member").data([]).exit().transition().delay(800).remove();

}

draw();

setTimeout(function() {
    bandMates = 
[
   {  "name":"John", "songs":102 },
   {  "name":"Paul", "songs":400 },
   {  "name":"George", "songs":31},
   {  "name":"Pete", "songs":212 }
];
    draw();
}, 2000);

根据参考文献［2］，必须保证调用 exit()和remove（）函数的对象不是enter（）到数据节点中；

另外，如果采用以上方式1中的方法，不能将exit()和remove（）以链式方式写出，即：

content.exit()transition().delay(1000).remove(); 是没办法正常工作的。
但是方式2中将数据清空后为什么就可以以链式方式写出，个中缘由我也没搞清楚，如果哪位网友找到原因，请不吝指教。

Reference

[1]http://d3js.org/

[2]http://stackoverflow.com/questions/18068066/exit-not-working-properly.

转载于:https://www.cnblogs.com/jiayouwyhit/p/4071465.html