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

它按預期工作！ 雅虎

小提琴