// 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();

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);