如何沿着路径移动，但只能在两个指定的路径点之间移动

Question

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

假设有一条路径和一个圆形元素，我希望圆形在过渡中跟随该路径，但最多只能达到一定百分比。 我之前问过这个问题，并从 Gerardo Furtado 那里得到了很好的回答：My former question

不过，这方面的一个问题留给我，因为我是初学者，到目前为止我找不到任何可行的解决方案：

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

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

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

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

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

Answer 1

好吧，我必须同意LeBeau，我看到你也同意。既然我回答了你的last question，我只需要对函数做一些小的改动。但是，下次请记住他的建议：在提出问题时，向我们展示一些您尝试过的代码，即使它不起作用，因为它显示了努力。

回到问题。

对于这个解决方案，我将把所有内容封装在一个名为 move 的函数中，该函数接受两个参数，初始位置和最终位置（均为百分比）：

function move(initialPosition, finalPosition) {

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

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 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：此答案中的函数不接受大于 1 的值。但如果您需要在路径中执行“一圈”以上的操作，可以尝试更改它。