CODEWITHSUNDEEP
javascriptanimationd3.js
Arnold Zokas
Arnold Zokas

Reputation: 8560

d3 line graph with smooth update animation

I'm trying to adapt an Animated Line Graphs example from: http://bl.ocks.org/benjchristensen/1148374

<div id="graph1" class="aGraph" style="width:600px; height:60px;"></div>

<script>
    function draw(id, width, height, updateDelay, transitionDelay) {
        var graph = d3.select(id).append("svg:svg").attr("width", "100%").attr("height", "100%");
        var data = [3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 9];

    var x = d3.scale.linear().domain([0, 48]).range([-5, width]);
    var y = d3.scale.linear().domain([0, 10]).range([0, height]);

    var line = d3.svg.line()
            .x(function(d, i) { return x(i); })
            .y(function(d) { return y(d); })
            .interpolate("basis");

    graph.selectAll("path")
            .data([data])
            .enter()
            .append("svg:path")
            .attr("d", line);

    function redraw() {
        graph.selectAll("path")
                .data([data])
                .attr("transform", "translate(" + x(1) + ")")
                .attr("d", line)
                .transition()
                .ease("linear")
                .duration(transitionDelay)
                .attr("transform", "translate(" + x(0) + ")");
    }

    setInterval(function () {
                data.push(data.shift());
                redraw();
        }, updateDelay);
    }

    draw("#graph1", 300, 30, 1000, 1000);
</script>

This animates correctly using d3 v2 (http://d3js.org/d3.v2.js).
Under d3 v3.3.9 (http://d3js.org/d3.v3.js) there is no smooth transition and I can figure out why.

Are there any radical differences between v2 and v3 that make the above script invalid?

Upvotes: 3

Views: 3965

Answers (1)

Arnold Zokas
Arnold Zokas

Reputation: 8560

Posted this on GitHub: https://github.com/mbostock/d3/issues/1624

Here's the response:

See #1410 for an in-depth explanation of the problem and the solution (selection.interrupt added in version 3.3). To summarise, existing transitions need to be interrupted before registering new ones, in particular when the new transition starts before or at the same time as the old one ends.

In other words, in the example above you need to replace:

.transition()

with:

.interrupt()
.transition()

Upvotes: 3

Related Questions