D3 Examples - Enter n Merge n Exit

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<svg width="1280" height="800"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    g = svg.append("g").attr("transform", "translate(32," + (height / 2) + ")");
​
var colors = [ "#11ff00", "#22aa00", "#333300", "#440000", "#aa0000", "#ff0000", "#000033", "#000066", "#000099", "#0000dd" ];
​
function update(data) {
  var cellsize = 30;
  
  console.log(data)
​
  var t = d3.transition()
      .duration(1500);
​
  // JOIN new data with old elements.
  var soft = g.selectAll(".soft")
    .data(data.filter(function(d) { return d.soft != 0; }), function(d, i) { return d.row + ":" + d.col; })
   
  // ENTER new elements present in new data.
  var enter = soft.enter()
        .append("rect")
      .attr("class", "soft")
      .attr("x", function(d, i) { return (d.row * cellsize); })
      .attr("width", cellsize - 5)
      .attr("height", cellsize)
        .style("fill", function(d, i) { return colors[d.soft] })
  
  var exit = soft.exit();
  
  var merge = enter.merge(soft)
      .transition(t)
      .style("fill", function(d, i) { return colors[d.soft] })
        .style("opacity", 1)
​
  // EXIT old elements not present in new data.
  exit.transition(t)
      .style("opacity", 1e-6)
      .remove();
}
d3.interval(function() {
  var data = [];
  
  for(var i = 0; i < 10; i++)
      data.push({ row : i, col : 0, value : Math.floor(Math.random() * 10), soft : Math.floor(Math.random() * 3)});
  update(data);
}, 1000);
</script>
​
    