d3 transition of realtime graph unsmooth in ie

Question

I'm using the super-cool d3.js by Mike Bostock & team and have just implemented my own version of a sliding time-series chart as shown on Mike's page (the second version).

Unfortunatly, the sliding effect (even that of Mike's version) is crappy in Internet Explorer (versions < 11), while it's totally smooth in e.g. Firefox. The continously sliding effect is achieved by recoursivly calling the tick() function and that's the point where IE seems to have a problem.

What makes me think that there might be some solution to this is that the very first transition is smooth even in IE.

I've tried using setInterval as an alternative but to no success. Can anybody think of a solution (other than to stop using ie..)?

Answer 1

Replace .attr("transform", null) with .attr("transform", "").

For example:

path
    .attr("d", line)
    // ******************************
    .attr("transform", "") // <- here 
    // ******************************
    .transition()
      .duration(750)
      .ease("linear")
      .attr("transform", "translate(" + x(-1) + ")")
      .each("end", function() { tick(path, line, data, x); });