smooth recursive transition in D3

3303 views javascript
1

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

    }

answered question

1 Answer

3

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)

posted this

Have an answer?

JD

Please login first before posting an answer.