score:1

Accepted answer

The issue is a bit hidden. In tick(), you made a new y to handle the new domain and range, but you only updated yAxis with this y. What about the line which is still referencing the original y? It also needs update! You can either add code to update the line:

// update Y Axis
var y = d3.scale.linear().domain([r - 20,r + 20]).range([height, 0]);
var yAxis = d3.svg.axis().scale(y).orient("left");
svg.selectAll(".y.axis").call(yAxis);

// NEW CODE
line.y(function(d, i) { return y(d); });

Or (better I think), instead of creating a new y every tick, you can modify the existing one, saving all the efforts to assign it to everywhere else using it. Just change this line:

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

into:

y.domain([minY, maxY]);

Then you'll be able to see the newest point coming in the right.

But there's one more problem with the code: you are increasing the value too quickly so that it's hard to see old points on the chart, so I tuned the arguments a bit to make it look better. Ideally, the minY and maxY should be calculated according to the values in data, not guessing magic boundarys. :)

Fiddle: https://jsfiddle.net/gbwycmrd/


Related Query

More Query from same tag