d3中实时图形不平滑的转换

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 eg 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); });