D3 Examples - animate line with arrow

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-selection-multi.v1.min.js" ></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
   svg.append("svg:defs")              
  .append("marker")
  .attrs({
    "id":"arrow",
    "viewBox":"0 -5 10 10",
    "refX":5,
    "refY":0,
    "markerWidth":4,
    "markerHeight":4,
    "orient":"auto"
  })
  .append("path")
  .attr("d", "M0,-5L10,0L0,5")
  .attr("class","arrowHead");
​
        var data = [
      [10,10],
      [10,300],
      [300,300]    
    ]
    var line = d3.line()
    
    svg.append("path")
    .attr("d",line(data))
    .attr("id","p")
    .attrs({
      fill:"none",
      stroke:"black",
      "stroke-width":"5px",
      "marker-end":"url(#arrow)"
    })
    
    var node = d3.select("path#p").node()
    var l = node.getTotalLength()
    console.log(l)
    var pe = node.getPointAtLength(0)
    var ps = node.getPointAtLength(1)
    
    svg.append("circle")
    .attrs({
      r:10,
      fill:"red",
      cx:ps.x,
      cy:ps.y
    })
    console.log(ps,pe)
  </script>
</body>
​
    