Javascript 如何沿路径移动，但仅在两个指定路径点之间移动

这个问题是关于d3版本3.x和路径移动的

假设有一条路径和一个圆元素，我希望圆在过渡中遵循该路径，但最多只能达到某个百分比。 我以前问过这个问题，Gerardo Furtado给了我一个很好的回答：

尽管如此，在这方面我还有一个问题要问，因为我是一个初学者，到目前为止我还没有找到任何有效的解决方案：

我如何追踪这条路径，比方说，从25%的点到50%的点，然后再从50%的点到60%的点？

这些数字只是示例，任何百分比值都是可能的

我需要避免路径移动总是从位置0开始，但我希望从圆已经到达的当前位置开始路径移动

希望我能把我的问题表达得足够清楚

---

非常感谢您的见解和帮助。

好吧，我不得不同意您的看法，我知道您也同意。既然我回答了你的问题，我只需要对函数做一些小的修改。但是，下次要记住他的建议：当问问题时，向我们展示一些您尝试过的代码，即使它不起作用，因为它显示了努力

回到问题上来

对于此解决方案，我将把所有内容封装在名为

move

的函数中，该函数接受两个参数，初始位置和最终位置（均以百分比表示）：

初始位置，顾名思义，设置圆沿路径的初始位置。数学是这样的：

var start = path.node()
    .getPointAtLength(path.node().getTotalLength() * initialPosition);

然后，我稍微改变了上次回答的函数，以接受初始和最终位置：

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 + ")";
        };
    };
}

这是演示。单击按钮调用

move

，以

0.25

（初始位置）和

0.5

（最终位置）作为参数：

var点=[
[240, 100],
[290, 200],
[340, 50],
[390, 150],
[90, 150],
[140, 50],
[190, 200]
];
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，500）
.attr（“高度”，300）；
var path=svg.append（“路径”）
.数据（[点]）
.attr（“d”，d3.svg.line（）
.张力（0）//Catmull–Rom
.插入（“基数闭合”）；
var color=d3.scale.category10（）；
var数据位置=[{
首字母：0.25，
期末成绩：0.5
}, {
首字母：0.5，
期末成绩：0.6
}];
svg.selectAll（“.point”）
.数据（点数）
.enter（）.append（“圆”）
.attr（“r”，4）
.attr（“转换”，函数（d）{
返回“translate（“+d+”）；
});
d3.选择（“按钮”）。在（“单击”上，函数（）{
移动（0.25,0.5）；
});
功能移动（初始位置、最终位置）{
var start=path.node（）.getPointAtLength（path.node（）.getTotalLength（）*初始位置）；
var circle=svg.append（“circle”）
.attr（“r”，13）
.attr（“填充”，函数（d，i）{
返回颜色（一）
})
.attr（“transform”、“translate”（+start.x+）、“+start.y+”）；
圆。过渡（）
.持续时间（1000）
.attrTween（“转换”，函数（）{
返回translateLong（path.node（））（）
});
函数translateLong（路径）{
var l=path.getTotalLength（）*（finalPosition-initialPosition）；
返回函数（）{
返回函数（t）{
var p=path.getPointAtLength（t*l+
（path.getTotalLength（）*initialPosition））；
返回“translate”（“+p.x+”，“+p.y+”）；
};
};
}
}

路径{
填充：无；
行程：#000；
笔画宽度：3px；
}
圈{
冲程：#fff；
笔画宽度：3px；
}

移动

谢谢您的评论。我同意，所以不应该为我写代码。在我有限的知识范围内，我已经尝试了几天不同的可行方法，阅读了大量的资源，但这些都没有涵盖我的目标，我的尝试也没有成功。我真的不知道该找什么了。也许我只是错过了正确的关键词。这是一个了不起的工作。可悲的是，我不够聪明，无法计算出你在TranslateLong方法中所做的数学运算。这应该能解决我的需要。再次感谢您的大力帮助！

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 + ")";
        };
    };
}