D3 中的平滑递归转换

Question

我创建了一个简单的过渡，它会在结束时自行调用。为什么它是生涩的，如何让它变得光滑？ (jsfiddle here)

    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 docs：

If an easing function is not specified, it defaults to d3.easeCubic.

为什么卡顿是因为在使用easeCubic时，物体开始移动缓慢，停止缓慢。您可以在此处可视化缓动效果：https://easings.net/#easeInOutCubic

FIXED DEMO (with linear easing)

D3 中的平滑递归转换

smooth recursive transition in D3

javascript

transition

d3.js