score:6

it seems to me that your problem is the fact that the graph is synchronous - "duration" is both used for animation and for graph shifting. essentially, changing duration will avail nothing.

you can introduce a time multiplier. then try dividing duration by two, and using a multiplier of 2. your actual data duration is now duration*timemultiplier (you might want to change the names to make it less confusing, or use a timedivider in the animation).

// shift domain
x.domain([now - (limit - 2) * duration * timemultiplier, now - duration * timemultiplier])

// slide x-axis left
axis.transition()
  .duration(duration)
  .ease('linear')
  .call(x.axis);

// slide paths left
var t = paths.attr('transform', null)
  .transition()
  .duration(duration)
  .ease('linear')
t.attr('transform', 'translate(' + x(now - (limit - 1) * duration * timemultiplier) + ')')
  .each('end', tick)

another thing you might try is to add the points two at a time, i.e. you skip the shift on odd ticks, and shift double the amount on even ticks. this reduces the overhead at the expense of making the animation a bit jaggier (but not very much, because it also plays faster).


Related Query