D3 Examples - Animate path in D3

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
  #line{
    width: 100%;
    margin: 20px 0;
    height: 300px;
  }
  .old {
    stroke: lightgrey;
    stroke-dasharray: 5;
    stroke-dashoffset: 5;
  }
•</style>
</head>
<body>
  <div id="line"></div>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.min.js"></script>
  <script type="text/javascript">
    var w = window.innerWidth;
    var h = 100;
​
    var svg = d3.select("#line")
      .append("svg")
      .attr("width", w)
      .attr("height", h)
      .attr("id", "visualization");
​
    var x = d3.scaleLinear().domain([0, 10]).range([0, w]);
    var y = d3.scaleLinear().domain([0, 10]).range([10, h - 10]);
​
    var line = d3.line()
      .x(function(d,i) {return x(i);})
      .y(function(d) {return y(d);})
      .curve(d3.curveNatural)
​
    // data is created inside the function so it is always unique
    let repeat = () => {
      var data = d3.range(11).map(function(){return Math.random()*10})
​
      // Uncomment following line to clear the previously drawn line
      //svg.selectAll("path").remove();
​
      // Set a light grey class on old paths
      svg.selectAll("path").attr("class", "old");
​
      var path = svg.append("path")
        .attr("d", line(data))
        .attr("stroke", "darkgrey")
        .attr("stroke-width", "2")
        .attr("fill", "none");
​
      var totalLength = path.node().getTotalLength();
​
      path
        .attr("stroke-dasharray", totalLength + " " + totalLength)
        .attr("stroke-dashoffset", totalLength)
        .transition()
          .duration(4000)
          .ease(d3.easeLinear)
          .attr("stroke-dashoffset", 0)
          .on("end", repeat);
    };
    repeat();
    
  </script>
</body>
</html>
​
    