Animating a line with an arrow in d3

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Animating a line with an arrow in d3</title>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>

.line {
    stroke: blue;
    stroke-width: 1.5px;
    fill: white;
}

circle {
    fill: red;
}
#marker {
  stroke: black;
    fill: black;
}

</style>
</head>
<body>
<div id="chart">
<script language="javascript">
"use strict"

var svg = d3.select("body").append("svg").append("g").attr("transform", "translate(100,50)")

svg.append("svg:defs")
	.append("svg:marker")
	.attr("id", "arrow")	
	.attr("refX", 2)
	.attr("refY", 6)
	.attr("markerWidth", 13)
	.attr("markerHeight", 13)
	.attr("orient", "auto")
	.append("svg:path")
	.attr("d", "M2,2 L2,11 L10,6 L2,2");

var line = d3.svg.line()
                 .x( function(point) { return point.lx; })
                 .y( function(point) { return point.ly; });

function lineData(d){
    // i'm assuming here that supplied datum 
    // is a link between 'source' and 'target'
    var points = [
        {lx: d.source.x, ly: d.source.y},
        {lx: d.target.x, ly: d.target.y}
    ];
    return line(points);
}

var path = svg.append("path")
.data([{source: {x : 0, y : 0}, target: {x : 80, y : 80}}])
    .attr("class", "line")
	    //.style("marker-end", "url(#arrow)")
    .attr("d", lineData);
//var arrow = svg.append("svg:path")
	//.attr("d", "M2,2 L2,11 L10,6 L2,2");

console.log(d3.svg.symbol())

var arrow = svg.append("svg:path")
	.attr("d", d3.svg.symbol().type("triangle-down")(10,1));

arrow.transition()
      .duration(2000)
      .ease("linear")
      .attrTween("transform", translateAlong(path.node()))
      //.each("end", transition);

// Returns an attrTween for translating along the specified path element.
function translateAlong(path) {
  var l = path.getTotalLength();
    var ps = path.getPointAtLength(0);
    var pe = path.getPointAtLength(l);
    var angl = Math.atan2(pe.y - ps.y, pe.x - ps.x) * (180 / Math.PI) - 90;
    var rot_tran = "rotate(" + angl + ")";
  return function(d, i, a) {
    console.log(d);
    
    return function(t) {
      var p = path.getPointAtLength(t * l);
      return "translate(" + p.x + "," + p.y + ") " + rot_tran;
    };
  };
}

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

path
      .attr("stroke-dasharray", totalLength + " " + totalLength)
      .attr("stroke-dashoffset", totalLength)
      .transition()
        .duration(2000)        
        .ease("linear")
        .attr("stroke-dashoffset", 0);
</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js