D3 Examples - [test] Enter exit update check

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
text {
  font: bold 48px monospace;
}
​
.enter {
  fill: green;
}
​
.update {
  fill: #333;
}
​
</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
​
var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
​
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    g = svg.append("g").attr("transform", "translate(32," + (height / 2) + ")");
​
function update(data) {
​
  // DATA JOIN
  // Join new data with old elements, if any.
  var text = g.selectAll("text")
    .data(data, function(d, i) { return i; });
  
  console.log('data : ', data);
    console.log('a : ', text);
  console.log('a : ', text.nodes());
  
  text1 = g.selectAll("text")
    .data(data);
  
    console.log('b : ', text);
  console.log('b : ', text.nodes());
​
  // UPDATE
  // Update old elements as needed.
  text.attr("class", "update");
​
  // ENTER
  // Create new elements as needed.
  //
  // ENTER + UPDATE
  // After merging the entered elements with the update selection,
  // apply operations to both.
  text.enter().append("text")
      .attr("class", "enter")
      .attr("dy", ".35em")
      .text(function(d) { return d; })
    .merge(text)
      .attr("x", function(d, i) { return i * 27; });
​
  // EXIT
//   Remove old elements as needed.
  text.exit().remove();
}
​
//   update("abcdefghi".split(""));
//   update("abdefghi".split(""));
// The initial display.
update(alphabet);
​
// Grab a random sample of letters from the alphabet, in alphabetical order.
d3.interval(function() {
  update(d3.shuffle(alphabet)
      .slice(0, Math.floor(Math.random() * 26))
      .sort());
}, 1500);
​
</script>
​
    