Animate path in D3 by majomo

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
  #line{
    width: 700px;
    margin: 20px 0;
    height: 300px;
    background: #eee;
  }
  button {
    margin: 20px 0 0 20px;
  }
</style>
</head>
<body>
  <div id="line"></div>
  <script type="text/javascript" src="//mbostock.github.com/d3/d3.js?2.5.0"></script>
  <script type="text/javascript">
    var w = 700;
    var h = 300;

    var svg = d3.select("#line")
      .append("svg")
      .attr("width", w)
      .attr("height", h)
      .attr("id", "visualization")
      .attr("xmlns", "//www.w3.org/2000/svg");

    var data = d3.range(11).map(function(){return Math.random()*10})
    var x = d3.scale.linear().domain([0, 10]).range([0, 700]);
    var y = d3.scale.linear().domain([0, 10]).range([10, 290]);
    var line = d3.svg.line()
      .interpolate("cardinal")
      .x(function(d,i) {return x(i);})
      .y(function(d) {return y(d);})

    var path = svg.append("path")
      .attr("d", line(data))
      .attr("stroke", "steelblue")
      .attr("stroke-width", "2")
      .attr("fill", "none");

    var totalLength = path.node().getTotalLength();

    path
      .attr("stroke-dasharray", totalLength + " " + totalLength)
      .attr("stroke-dashoffset", totalLength)
      .transition()
        .duration(2000)
        .ease("linear")
        .attr("stroke-dashoffset", 0);

    svg.on("click", function(){
      path      
        .transition()
        .duration(2000)
        .ease("linear")
        .attr("stroke-dashoffset", totalLength);
    })
    

    
  </script>
</body>
</html>