Transition shapes along custom paths

Just for fun, code isn't very elegant. One new topic explored, transition an object along a custom path. Make use of built in SVG values such as .getTotalLength and .getPointAtLength to make a custom tween. See other examples here: http://jsfiddle.net/geotheory/UJuWX/ (jsfiddle not by me)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>death star plans</title>
<script src="https://d3js.org/d3.v3.min.js"></script>

</head>

var svg = d3.select("body").append("svg").attr("width",1000).attr("height",1500).style("fill","black");

var model = svg.append("path").attr("d","M34.6562+250.75L96.5+281.906L34.6562+250.75ZM35.3438+251.375L78.75+326.094L35.3438+251.375ZM97.1875+282L174.812+340.156L97.1875+282ZM41.25+313.375L12.3125+332.938L41.25+313.375ZM41.4375+315.531L81+328.562L41.4375+315.531ZM78.8438+326.625L175.594+341.844L78.8438+326.625ZM78.8438+329.281L39.5+352.469L78.8438+329.281ZM15.3438+332.938L39.4375+353.312L15.3438+332.938ZM179.031+342.031L109.781+364.031L179.031+342.031ZM39.625+353.531L74.5938+364.844L39.625+353.531ZM271.312+364.125L74.4688+364.906L271.312+364.125ZM450.312+419.281L449.719+686.068L450.312+419.281ZM481.458+414.657L481.562+685.656L481.458+414.657ZM3.84+177.92L1016.64+176.773L1017.11+683.875L6.73912+687.303L3.84+177.92ZM35.8915+180.318L36.8607+251.554M96.4663+179.348L97.9201+281.599M271.788+364.189L288.353+392.089M288.643+391.798L321.338+392.525M321.192+391.798L322.5+365.788M322.409+365.32L403.842+364.317M404.395+364.106L430.93+350.36M404.395+364.823L429.376+380.362M430.81+349.165L460.96+369.535M429.609+380.212L451.009+419.77M457.808+368.847L458.081+686.068M501.58+379.553L481.458+414.657M501.644+380.13L526.913+363.647M497.24+349.75L525.684+362.613M471.211+368.621L497.283+350.312M471.089+368.563L472.219+686.99M526.2+364.279L607.631+364.279M608.295+363.782L608.626+391.147M607.44+392.34L642.834+392.015M643.049+392.082L659.317+365.42M659.975+365.415L1016.67+364.788")
.style("stroke","#00CC00")
.style("stroke-width",2).attr("transform","translate(0,-200)");

var ship = svg.append("path").attr("d","M1007.45+305.71L1091.21+343.468M1091.48+345.245L1105.1+318.003M1007.93+305.883L1105.91+318.853").style("stroke","#00CC00")
.style("stroke-width",2).attr("id","path1");

var shipPath = svg.append("path").attr("d","M1031.23+316.023C606.011+284.203+248.768+195.977+227.073+128")
.style("stroke","none").style("fill","none").attr("id","path2");

ship.transition().duration(2000).delay(1000).ease("linear")
    .attrTween("transform", translateAlong(d3.select("#path2")[0][0]));

var bombPath = svg.append("path").attr("transform","translate(00,00)")
.attr("d","M672.058+287.71C527.418+294.11+478.778+351.71+464.698+365.79M465.37+365.449L466.245+950.914")
.style("stroke","none").style("fill","none").attr("id","path3");

var bomb= svg.append("circle").attr("r",5).attr("cx",0).attr("cy",0).style("fill","green");

bomb.transition().duration(4000).delay(2100).ease("linear")
    .attrTween("transform", translateAlong2(d3.select("#path3")[0][0]));

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

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

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