How to update the Y domain with a transition in D3.JS?

Question

I have to display a growing line chart which is updated every 100ms. I find a way to properly update the data with :

path
    .attr("d", line)
    .attr("transform", null)
    .transition()
    .duration(100)
    .ease("linear")
    .attr("transform", "translate(" + x(0) + ",0)")
    .each("end", tick);

But I have issue with Y axis domain.

I define my Y axis like that :

var y = d3.scale.linear()
    .domain([-1, 1])
    .range([height, 0]);

and then I update it on each refresh with the instruction :

y.domain([avg - 10, avg + 10])

It works but I have a bad "clipping" effect.

Demo: https://jsfiddle.net/j499oy0e/

How to remove it with transition or something similar?

score 0 · Answer 1 · edited May 23 '17 at 12:14

Instead of listening to the "end" event of the transition and calling the tick() function again, I would suggest using the requestAnimationFrame() provided by javascript which will help make the animation smoother. If you setup your tick function as follows:

function tick(){
  requestAnimationFrame(tick);
  //...rest of the code
}

What will happen is that requestAnimationFrame will wait for the current 'drawing' to finish before calling the function passed to it, which is the function itself. After adding this change and removing '.each' from the path selection, you may notice an animation with variable fps (depending on many things). The fps of this animation can be controlled very easily. You can follow the instructions here: Controlling fps with requestAnimationFrame?

Also, try removing the transition altogether and see if you like that better

path
.attr("d", line)
.attr("transform", "translate(" + x(0) + ",0)");

Hope this was what you were looking for!

How to update the Y domain with a transition in D3.JS?

1 Answers1