score:1

Accepted answer

To do something like this, you need to make an update function update(data):

As shown below:

//make an svg
var svg=d3.select("body").append("svg").attr({
      "width": "500px",
      "height": "500px"
  });
var data = [32, 57, 293];
update(data);
//add a node after 5 seconds
setTimeout(function(){ data.push(90); update(data) }, 5000);

//remove a node after 10 seconds
setTimeout(function(){ data.pop(); update(data) }, 10000);


function update(ary){
    //selection of sircle from svg
    var circle = svg.selectAll("circle")
    .data(ary);
    //add circle
    circle.enter().append("svg:circle")
    .attr("cy", 60)
    .attr("cx", function(d, i) { return i * 100 + 30; })
    .attr("r", function(d) { return Math.sqrt(d); });
    //remove any circle which is not in selection
    circle.exit().remove();
}

Working code here.

This is a good read will help you understand the concept.


Related Query

More Query from same tag