score:2

Accepted answer

Here is the updated jsfiddle. https://jsfiddle.net/3kn56mb7/12/

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_')
    .select('path');


lineselection.interrupt()
        .transition()
    .duration(duration)
    .ease(d3.easeLinear)
    .attr('transform', 'translate(' + -(xScale.range()[0]/((duration / 100)-2)) + ',' + margin + ')');


if (data[0].x < time - time_frame - duration ){
        console.log('shift');
            data.shift();
}

lineselection.attr('d',line)
    .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]);

d3.select('body')
    .select('svg')
    .select('g')
    .selectAll('.x.axis')
    .transition()
    .duration(duration)
    .ease(d3.easeLinear)
    .call(xAxis);

}

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: https://jsfiddle.net/3kn56mb7/11/

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

To this: https://jsfiddle.net/3kn56mb7/12/

.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.

score:1

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