How to follow the path partially or in percentage only
I am starting with d3 and currently cannot use the newest version, but instead I am on 3.x.
What I'm trying to figure out should be simple, but unfortunately I haven't found any resources on how to do this:
The goal is to show the path in my svg. Then I want to display eg. circle and jump / move / trace the circle along the way. This works great if I need the full path.
But the goal is to only partially follow the path.
What should I do if I want the circle to start at position 0 of the path and continue until, for example, 25% of the path?
And again, if the circle is 25%, how can I follow from there to 50% of the path without going from position 0 of the path?
I will be very grateful for any material you can provide here. Thank you very much.
source to share
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 an array of data, specifying how much each circle should travel along the path:
var data = [0.9, 1, 0.8, 0.75, 1.2];
Values are shown here as a percentage. So, we have 5 circles: the first (blue in the demo below) will stop at 90% of the path, the second is orange at 100%, the third (green) at 80%, the fourth (red) at 75%, and the fifth (colored purple in demo) will move 120% of the path, that is, it will move along the entire length of the path and 20% more.
Then I modified the Bostock function translateAlong
to get datum
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 part is here:
var l = path.getTotalLength() * d;
which will determine the end position of each circle. The triple operator is important because of our last circle, which will travel more than 100% of the way.
Finally, we must name the transition, passing in the base point and the path itself:
circle.transition()
.duration(10000)
.attrTween("transform", function(d) {
return translateAlong(d, path.node())()
});
Here's a 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>
source to share