block by mbostock f7dcecb19c4af317e464

Text Transition II

Full Screen

A demonstration of transitioning text by fading-out the old element and fading-in a new replacement.

Updated Example →

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

h1 {
  font: 400 120px/500px "Helvetica Neue";
  text-align: center;
  width: 960px;
  height: 500px;
  margin: 0;
  position: absolute;
}

</style>
<h1>0</h1>
<script src="//d3js.org/d3.v4.0.0-alpha.23.min.js"></script>
<script>

var format = d3.format(",d");

d3.select("h1")
  .transition()
    .duration(2500)
    .on("start", function repeat() {
      var t = d3.active(this)
          .style("opacity", 0)
          .remove();

      d3.select("body").append("h1")
          .style("opacity", 0)
          .text(format(Math.random() * 1e6))
        .transition(t)
          .style("opacity", 1)
        .transition()
          .delay(1500)
          .on("start", repeat);
    });

</script>