How to navigate a path, but only between two specified waypoints
This question is about d3 version 3.x and path movements.
Imagine that there is a path and a circle element, and I want the circle to go that path in transition, but only up to a certain percentage. I've asked this before and got a great answer from Gerardo Furtado: My previous question
However, one question in this regard remains for me, and since I'm a beginner, I haven't found any working solution yet:
How can I track this path, say, from a point at 25% to a point at 50%, and then from a point at 50% to a point at 60%?
These numbers are just examples, any percentage should be possible.
I need to avoid the fact that the movement of the path always starts from position 0, but instead I want to start the movement along the path from the current position to which the circle has already reached.
I hope I could make my question clear enough.
Thank you for your understanding and help.
Well, I have to agree with LeBeau and I see that you do that too. Since I answered your last question , I just needed to make some minor changes to the function. However, save his recommendations for next time: when asking a question, show us some code you tried, even if it doesn't work because it shows effort.
Let's get back to the question.
For this solution, I will wrap everything inside a named function move
that takes two arguments, a start position and an end position (both in percentages):
function move(initialPosition, finalPosition) {
Home position, as the name suggests, sets the starting position of the circle along the path. The math is this:
var start = path.node()
.getPointAtLength(path.node().getTotalLength() * initialPosition);
Then I slightly modified the function from my last answer to accept the start and end positions:
function translateAlong(path) {
var l = path.getTotalLength() * (finalPosition - initialPosition);
return function() {
return function(t) {
var p = path.getPointAtLength(t * l +
(path.getTotalLength() * initialPosition));
return "translate(" + p.x + "," + p.y + ")";
};
};
}
Here's a demo. Clicking the button invokes move
with 0.25
(start position) and 0.5
(end position) as arguments:
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 dataPositions = [{
initial: 0.25,
final: 0.5
}, {
initial: 0.5,
final: 0.6
}];
svg.selectAll(".point")
.data(points)
.enter().append("circle")
.attr("r", 4)
.attr("transform", function(d) {
return "translate(" + d + ")";
});
d3.select("button").on("click", function() {
move(0.25, 0.5);
});
function move(initialPosition, finalPosition) {
var start = path.node().getPointAtLength(path.node().getTotalLength() * initialPosition);
var circle = svg.append("circle")
.attr("r", 13)
.attr("fill", function(d, i) {
return color(i)
})
.attr("transform", "translate(" + start.x + "," + start.y + ")");
circle.transition()
.duration(1000)
.attrTween("transform", function() {
return translateAlong(path.node())()
});
function translateAlong(path) {
var l = path.getTotalLength() * (finalPosition - initialPosition);
return function() {
return function(t) {
var p = path.getPointAtLength(t * l +
(path.getTotalLength() * initialPosition));
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>
<button>Move</button>
<br>
PS: The function in this answer does not accept values greater than 1. But you can try changing it if you need to do more than "one circle" in the path.