smooth recursive transition in D3

Question

I've created a simple transition which recalls itself at the end. Why is it jerky and how can it be made smooth? (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

It's because by default the transition easing function is not linear, but easeCubic . Setting the easing function to linear fixes the issue:

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

From the d3-transition docs :

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

Why it stutters is because when using easeCubic , the object starts moving slowly and stops slowly. You can visualize the easing effect here: https://easings.net/#easeInOutCubic

FIXED DEMO (with linear easing)