Point-Along-Path Interpolation

This example demonstrates how to use the getTotalLength and getPointAtLength methods on SVG path elements to interpolate a point along a Catmull–Rom spline.

A related technique is stroke dash interpolation.

forked from mbostock's block: Point-Along-Path Interpolation

forked from antonyross's block: Point-Along-Path Interpolation

<!DOCTYPE html>
<meta charset="utf-8">
<body>
  
<style>

path {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}

circle {
  /*fill: steelblue; */
  stroke: #fff;
  stroke-width: 3px;
}

</style>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var points = [
  [200, 200],
  [500, 200],
  [500, 400],
  [200, 400],
  
];
  var points2 = [
  [100, 200],
  [400, 200],
  [400, 400],
  [100, 400],
  
];

var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500);

// Text to show "stopwatch"
svg.append("text").text("hey").attr("x", 700).attr("y", 50)

/////////////  RUNNER  ///////////////////////
Runner.prototype.calc_collision = function(n)
								{
									var go = this.r * n;
									return go;
								};
Runner.prototype.get_random_color = function()
								{
									var colors = ["red", "green", "blue", "orange"]
          				random_color = Math.floor(Math.random()*colors.length);
          				return colors[random_color];
								};
			//Runner.prototype.r = 15;

function Runner(r,color,path)
			{
				this.r = r;
				this.color = color;
				this.path = path;
			}

///////////////////////////////////////////////

var dataset = [];
  
var path = svg.append("path")
    .data([points])
    .attr("d", d3.svg.line()
    .tension(0) // Catmull–Rom
    .interpolate("cardinal-closed"));

var path2 = svg.append("path")
    .data([points2])
    .attr("d", d3.svg.line()
    .tension(0) // Catmull–Rom
    .interpolate("cardinal-closed"));
  
// OPTIONAL
svg.selectAll("circle")
    .data(points)
    .enter()
    .append("circle")
    .attr("r", 4)
    .attr("transform", function(d) { return "translate(" + d + ")"; });
// OPTIONAL
  
/*
var circle = svg.append("circle")
    .attr("r", 13)
    .attr("transform", "translate(" + points[0] + ")");
*/
  
  
d3.select("svg").on("click", function()
     {
        // get the mouse position coordinates
        var coordinates = [0, 0];
        coordinates = d3.mouse(this);
        var x = coordinates[0];
        var y = coordinates[1];
				
  
  			
        dataset.push(new Runner(15, "blue", 1));

var circles = svg.selectAll("circle")	//Select all circles
                          .data(dataset);

circles.enter()
                .append("circle")
                .attr({cx:x, cy:y, fill: function(d){return d.get_random_color()}})
                .attr("r", function(d){return d.r})
                .attr("transform", "translate(" + points[0] + ")")

transition();

function transition() 
                {
                  circles.transition()
                      .duration(10000)
                      .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();
            return function(d, i, a) 
            {
              return function(t) 
              {
                var p = path.getPointAtLength(t * l);
                return "translate(" + p.x + "," + p.y + ")";
              };
  					};
					}
  
      });

</script>

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