D3 Examples - 10.transition-update pattern

10.transition-update pattern

By adding transitions, we can more easily follow the elements as they are entered, updated and exited. Separate transitions are defined for each of the three states. To avoid repeating transition timing parameters for the enter, update, and exit selections, a top-level transition t sets the duration, and then subsequent transitions use selection.transition, passing in t to inherit timing:

var t = d3.transition() .duration(750);

Want to read more? Try these tutorials:

See the D3 wiki for even more resources.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<script src="https://d3js.org/d3.v4.min.js"></script>
​
<svg width="960" height="500"></svg>
​
​
<style>
​
  
text {
  font: bold 48px monospace;
}
​
​
.enter {
  fill: green; 
}
​
.update {
  fill: #333;
}
​
.exit {
  fill: brown;
}
​
</style>
​
​
​
​
<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 alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
​
  
  
​
function update(data) {
​
// ----  create a transition func with duration --------------
  var t = d3.transition()
      .duration(750);
​
  var text = g.selectAll("text")
    .data(data, function(d) { return d; });
​
  
  
// ---- transit and remove exiting elements first ----------  
  text.exit()
      .attr("class", "exit")
//   apply transition func variable here
    .transition(t) 
//   transition to move down 60 px
      .attr("y", 60)
//   transition to grow value to transparent
      .style("fill-opacity", 1e-6)
//   finally remove it
      .remove(); 
​
  
  
​
  text.attr("class", "update")
      .attr("y", 0)
      .style("fill-opacity", 1)
//   above are states applied before transition  
    .transition(t) 
// during transition, moving to position by index * 32
      .attr("x", function(d, i) { return i * 32; });
​
​
// ---- update and exit elements are there already, entering elements needs created
  text.enter().append("text")
      .attr("class", "enter")
      .attr("dy", "0.298834868872151em")
      .attr("y", 0)
        .attr("x", 0)
      .style("fill-opacity", 1e-6)
      .text(function(d) { return d; })
    .transition(t)
      .attr("y", 0)
      .attr("x", function(d, i) { return i * 32; })
      .style("fill-opacity", 1);
}
​
  
​
update(alphabet);
​
  
d3.interval(function() {
  update(d3.shuffle(alphabet)
      .slice(0, Math.floor(Math.random() * 26))
      .sort());
}, 1000);
​
</script>
​
    