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.