Live updating line chart - Wont smoothly scroll off screen (wiggles) - d3.js

Question

I have a line chart that I've built for displaying live data. I've read through https://bost.ocks.org/mike/path/ and I can get it to smoothly come on screen, but for the life of me, I cant get it to not 'wiggle' when I remove a datapoint and the corresponding line section from the screen.
Here is the section of code where I am updating the line and x-axis.
lineselection.datum(data)
.transition()
.duration(1000)
.ease(d3.easeLinear)
.attr('d', line)
.attr('transform', 'translate(' + (xScale.range()[0]/data.length) + ',0)');
xScale = d3.scaleTime()
.domain([time, start_time])
.range([width - (margin * 2), 0])
.clamp(true);
g.selectAll('.x.axis')
.transition()
.duration(1000)
ease(d3.easeLinear)
.call(xAxis);
This produces a nice smooth line chart, where the new section of line is drawn outside of the clip-path, and then translated left into view. The x-axis scrolls along wonderfully with it.
In my data update method, I do a check to see if we are in my data view window (ie, we only want to view the last, say 60 seconds of data). If a point falls outside the time frame, we remove it, and update the start_time to reflect.
if ((time_frame + start_time) < time){
for (d = 0; d < data.length; d++){
if ((data[d].x + time_frame) < time){
data.shift();
}
else{
start_time = data[d].x;
break;
}
}
}
I am newer to both JS and D3, so please be gentle. Any help would be appreciated. Am I missing something obvious?
Here is a jsfiddle. https://jsfiddle.net/3kn56mb7/2/
Edit. Added a jsfiddle.

Answer 1

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.

Answer 2

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