D3 LIfecycle Events

by ramnathv

HTML

<div id="vis"></div>
<button id="update">Update</button>

JavaScript

var chart = d3.select("#vis").append("svg");
var circles = chart.selectAll("circle");

function draw(data, color) {
  circles = chart.selectAll("circle")
    .data(data, function(d) { return d; });

  // UPDATE
  circles.style("fill", color)
    .attr("r", 5);

  // ENTER
  circles.enter()
    .insert("circle")
    .attr("r", 3)
    .style("fill", "green");

  // MERGE
  circles
    .attr("cy", 10)
    .attr("cx", function(d) { 
      return d*10;
    });

  // EXIT
  circles.exit()
    .style("fill", "grey")
    .attr("r", 2);
}

draw([2,4,7,8,9,12,14,15,18], "blue");


d3.select("#update").on("click", function(){
    draw([1,2,4,5,6,7,8,9,20,21], "blue")
})