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

Question

我正在使用 d3 attrTween 在路径上平滑地平移圆圈，类似于 this example如下图所示:

圆的过渡在这里定义:

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，它允许我们检索路径不同长度的坐标。但是，我需要一种不同的行为，到目前为止我一直无法提出解决方案。

我需要圆沿路径设置动画，但水平速度稳定。这意味着圆圈应该花费尽可能多的时间来导航这个切片:

就像这个切片一样:

因为两个切片包含相同的宽度。在较低的层次上，我需要的是能够沿路径将任何 X 坐标与其相应的 Y 坐标平移。我看过所有 SVG path methods而且我在这里没有发现任何特别有用的东西。我希望 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 + ")";
        };
    };
}

它按预期工作!雅虎!

Fiddle