Accepted answer

Here is the updated jsfiddle.

Thank you elias for helping me get to this!

Here is my draw function. I used selection.interrupt() to overcome a jitter.

function draw(){
var line = d3.line()
    .x(function(d) { return xScale(d.x); })
    .y(function(d) { return yScale(d.y); });

var lineselection = svg.selectAll('.line_')

    .attr('transform', 'translate(' + -(xScale.range()[0]/((duration / 100)-2)) + ',' + margin + ')');

if (data[0].x < time - time_frame - duration ){

    .attr('transform', 'translate(0,' + margin + ')');

start_time = time - (duration * 2) - time_frame;

xScale.domain([time, time + (duration * 2) - time_frame])
    .range([width - (margin *2),0]);'body')


EDIT: I updated the code to reflect the selection.interrupt() change as well as included the entire draw function. I also updated the jsfiddle link.

EDIT 2: Fixed a margin error and updated the jsfiddle link.

EDIT 3: I came back to use this as a reference. I am looking at this bit of code a year later, and couldnt figure out why I did some weird math. I must have been breathing diesel fumes. In anycase, I redid the math so that it made sense (why was I dividing duration by 100 and subtracting 2)?

Changed this:

.attr('transform', 'translate(' + -(xScale.range()[0]/((duration / 100)-2)) + ',' + margin + ')');

To this:

.attr('transform', 'translate(' + -(xScale(data[data.length-1].x) -xScale.range()[0]) + ',' + margin + ')');

I am now taking the last data point every draw cycle, and getting its time (x value) and converting that to a position in the range. Then I subtract the max range out (width-margin*2). Make the difference negative so it moves left.


The basic problem is that your data elements' indices are changing by removing the obsolete elements. I've faced the very same issue in a project of mine, and solved it in the following way:

I recommend that doing what you now in the transition in two separate steps:

  • when removing the element, draw a new path with the new indices - do this immediately, without a transition, so the wiggling does not appear
  • after this has been done, a transition can happen, which is then only a translation, during which no elements get deleted

Related Query

More Query from same tag