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

固定演示（带线性缓和）