d3沿SVG路径的稳定水平过渡

Question

我正在使用d3 attrTween在路径上平滑地平移一个圆，类似于此示例 ，如下图所示：

圆的过渡在这里定义：

function transition() {
    circle.transition()
    .duration(2051)
    .ease("linear")
    .attrTween("transform", translateAlong(path.node()))
}

补间属性如下所示：

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

这要归功于SVG方法getPointAtLength ，它使我们能够检索路径不同长度的坐标。 但是，我需要一种不同的行为，到目前为止，我一直无法提出解决方案。

我需要圆沿路径进行动画处理，但水平速度要稳定。 这意味着该圆应该花很多时间来导航此切片：

与该切片一样：

因为两个切片都包含相同的宽度。 在较低的层次上，我需要的是能够沿着path转换任何X坐标及其对应的Y坐标 。 我已经研究了所有SVG路径方法 ，但在这里没有发现任何特别有用的方法。 我希望D3中有某种方法可以将X坐标输入到d3线并检索其相应的Y坐标。

这是如上所述的JSFiddle工作。 我真的很感谢我能为此提供的任何帮助。 谢谢！

Answer 1

我最终使用getPointAtLength为沿线的所有点创建了一个查找数组：

var lookup = [];
var granularity = 1000;
var l = path.node().getTotalLength();
for(var i = 1; i <= granularity; i++) {
    var p = path.node().getPointAtLength(l * (i/granularity))
    lookup.push({
        x: p.x,
        y: p.y
    })
}

在查找表中拥有所有这些点后，我在翻译补间中使用了平分线：

var xBisect = d3.bisector(function(d) { return d.x; }).left;
function translateAlong(path) {
    var l = path.getTotalLength();
    return function (d, i, a) {
        return function (t) {
            var index = xBisect(lookup, l * t);
            var p = lookup[index];
            return "translate(" + p.x + "," + p.y + ")";
        };
    };
}

它按预期工作！ 雅虎

小提琴