CODEWITHSUNDEEP
javascriptd3.jstransition
tic
tic

Reputation: 4189

smooth recursive transition in D3

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

    }

Upvotes: 1

Views: 86

Answers (1)

XCS
XCS

Reputation: 28137

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)

Upvotes: 3

Related Questions