block by mbostock 7004f92cac972edef365

Text Transition I

Full Screen

A demonstration of using transition.tween to interpolate text. The transition.text method doesn’t do this by default because it’s often distracting; instead, it just sets the new text value when the transition starts. Another way to transition text is to cross-fade.

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;
}

</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() {
      d3.active(this)
          .tween("text", function() {
            var that = d3.select(this),
                i = d3.interpolateNumber(that.text().replace(/,/g, ""), Math.random() * 1e6);
            return function(t) { that.text(format(i(t))); };
          })
        .transition()
          .delay(1500)
          .on("start", repeat);
    });

</script>