How to transition along a path partially or by percentage only

Question

I am a beginner with d3 and currently can not use the newest version, but instead I am on version 3.x.

What I am trying to realize should be simple, but sadly I didnt find resources on how to do it:

The goal is to display a path in my svg. Then I want to display e.g. a circle and transition / move / trace the circle along the path. This works fine if I want the full path to be followed.

But the goal is to follow the path only partially.

What could I do if I want the circle to start from position 0 of the path and follow it until e.g. 25% of the path?

And then again, if the circle is at 25%, how can I follow from there to 50% of the path without starting over from position 0 of the path?

I will be very thankful for any input you can provide here. Thank you very much.

Answer 1

I built my answer using this code from Mike Bostock (which uses D3 v3.x, as you want): https://bl.ocks.org/mbostock/1705868

First, I created a data array, specifying how much each circle should travel along the path:

var data = [0.9, 1, 0.8, 0.75, 1.2];

The values here are in percentages. So, we have 5 circles: the first one (blue in the demo below) will stop at 90% of the path, the second one (orange) at 100%, the third one (green) at 80%, the fourth one (red) at 75% and the fifth one (coloured purple in the demo) will travel 120% of the path, that is, it will travel all the length of the path and 20% more.

Then, I changed Bostock's function translateAlong to get the datum of each circle:

function translateAlong(d, path) {
    var l = path.getTotalLength() * d;
    return function(d, i, a) {
        return function(t) {
            var p = (t * l) < path.getTotalLength() ?
                path.getPointAtLength(t * l) : path.getPointAtLength(t * l - path.getTotalLength());
            return "translate(" + p.x + "," + p.y + ")";
        };
    };
}

The important piece here is:

var l = path.getTotalLength() * d;

Which will determine the final position of each circle. The ternary operator is important because of our last circle, which will travel more than 100% of the path.

Finally, we have to call the transition, passing the datum and the path itself:

circle.transition()
    .duration(10000)
    .attrTween("transform", function(d) {
        return translateAlong(d, path.node())()
    });

Here is the demo:

var points = [
     [240, 100],
     [290, 200],
     [340, 50],
     [390, 150],
     [90, 150],
     [140, 50],
     [190, 200]
 ];

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

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

 var color = d3.scale.category10();

 var data = [0.9, 1, 0.8, 0.75, 1.2];

 svg.selectAll(".point")
     .data(points)
     .enter().append("circle")
     .attr("r", 4)
     .attr("transform", function(d) {
         return "translate(" + d + ")";
     });

 var circle = svg.selectAll("foo")
     .data(data)
     .enter()
     .append("circle")
     .attr("r", 13)
     .attr("fill", function(d, i) {
         return color(i)
     })
     .attr("transform", "translate(" + points[0] + ")");


 circle.transition()
     .duration(10000)
     .attrTween("transform", function(d) {
         return translateAlong(d, path.node())()
     });

 // Returns an attrTween for translating along the specified path element.
 function translateAlong(d, path) {
     var l = path.getTotalLength() * d;
     return function(d, i, a) {
         return function(t) {
             var p = (t * l) < path.getTotalLength() ?
                 path.getPointAtLength(t * l) : path.getPointAtLength(t * l - path.getTotalLength());
             return "translate(" + p.x + "," + p.y + ")";
         };
     };
 }

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

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