D3 Examples - Un-truncate Text Tween

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
  <head>
   
<style>
​
text {
    font-family:Arial;
    font-size:16px;
}
</style>
​
​
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<body>
<script>
​
var margin = {top:10,left:10,bottom:10,right:10},
    width = 500 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
​
​
var svg = d3.select("body").append("svg")
    .attr("height", height + margin.top + margin.bottom)
    .attr("width", width + margin.left + margin.right)
    .append("g")
    .attr("transform","translate(" + margin.left + "," + margin.top + ")");
​
var  text = ["Truncated Text", "Truncated Text can be untruncated with a little bit of work!"];
​
var ease = d3.easeLinear,
    duration = 3000,
    delay = 1000;
​
svg.append("text")
    .attr("dx", 5)
    .attr("dy",50)
    .text(text[0])
    .transition()
    .delay(1000)
    .duration(duration)
    .ease(ease)
    .on("start", expand)
​
function expand() {
    d3.active(this)
        .tween("text", function() {
            var i = d3.interpolate(text[0].length, text[1].length)
            return function(t) {
                svg.select("text").text(text[1].slice(0,i(t)))
            }
        })
        .on("end", shrink)
}
​
function shrink() {
    svg.select("text")
        .transition()
        .duration(duration)
        .delay(delay)
        .ease(ease)
        .tween("text", function() {
            var i = d3.interpolate(text[1].length, text[0].length)
            return function(t) {
                svg.select("text").text(text[1].slice(0,i(t)))
            }
        })
        .transition()
        .duration(duration)
        .delay(delay)
        .on("start", expand)    
}
​
​
​
​
</script>
​
​
​
    