Animate path in D3

forked from duopixel's block: Animate path in D3

forked from wcjohnson11's block: Animate path in D3

<!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="https://cdn.jsdelivr.net/npm/d3@2.5.1/d3.js"></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", "https://www.w3.org/2000/svg");

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>

Modified http://mbostock.github.com/d3/d3.js?2.5.0 to a secure url

https://mbostock.github.com/d3/d3.js?2.5.0