move circle along path in d3

_.md

[ Launch Inlet ]

config.json

{"endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.7,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var data = [ 
  {x: 0, y:0},
  {x:62,y:66},
  {x:240,y:118},
  {x:350,y:10},
  {x:400,y:30},
  ]
  
var line = d3.svg.line()
  .x(function(d) {
     return d.x;
  })
  .y(function(d){
     return d.y
  });
  
var svg = d3.select("svg");

var group = svg.append("g")
  .attr({
  transform: "translate("+[60,150]+")"
  })

var path = group.append("path")
  .attr({
  d:line(data),
  fill:"none",
  stroke: "#000"
  })

var len = path.node().getTotalLength();
var offset = 0;

//progressively reveal the path
//when stroke-dashoffset is 0, path is fully revealed
//the attrTween property of the click handler
//dynamically sets stroke-dashoffset over the
//duration of the transition
path.attr({
  "stroke-dasharray":len+" "+len,
  "stroke-dashoffset":offset
}) 
  
  
var circle = group.append("circle")
    .attr({
      r:10,
      transform: function() {
      	  var p = path.node().getPointAtLength(len-offset)
              return "translate("+[p.x,p.y]+")";
      }
    });


svg.on("click",function() { 
      var dur = 2000;
    path.transition()
      .duration(dur)
      .ease("bounce")
      .attrTween("stroke-dashoffset",function(d,i){
        return function(t) {
          return len*(1-t);
        }
      })
      circle.transition()
        .duration(dur)
        .ease("bounce")
        .attrTween("transform",function(d,i){
          return function(t){
              var p = path.node().getPointAtLength(len*t)
              return "translate("+[p.x,p.y]+")"
          }
         })
    });