D3中的平滑遞歸轉換

Question

我創造了一個簡單的過渡，最后回憶起來。 它為什么生澀，怎么能變得光滑？ （ 這里是 jsfiddle）

    var circle = svg.append('circle')
    .attr("r",10)
    .attr("cx",10)
    .attr("cy",10)
    .style("fill","red");

    go()

    function go() {
        var c=svg.select("circle");
        c
        .transition()
        .duration(1000)
        .attr("cx",1*c.attr("cx")+10)
        .on("end",go);

    }

Answer 1

這是因為默認情況下，轉換緩動函數不是線性的，而是easeCubic 。 將緩動函數設置為線性修復問題：

    function go() {
        var c=svg.select("circle");
        c
        .transition()
        .ease(d3.easeLinear) // <-- THIS WAS ADDED
        .duration(1000)
        .attr("cx",1*c.attr("cx")+100)
        .on("end",go);
}

來自d3-transition文檔 ：

如果未指定緩動函數，則默認為d3.easeCubic。

為什么它口吃是因為當使用easeCubic時 ，對象開始緩慢移動並緩慢停止。 您可以在此處查看緩動效果： https ： //easings.net/#easeInOutCubic

固定演示（帶線性緩和）