Smooth update to x axis in a D3 line chart?

问题

I have an example animated line chart located here: http://www.animatedcreations.net/d3/animatedLineChart.html

Everything is working as I would like it to, except that the redraw on the graph line is not smooth as in the example at the bottom of this page: http://bost.ocks.org/mike/path/. Another problem is that the line and x axis are slightly out of sync.

I am pretty sure the problem with code lies in how .attr("d", line) is updated. Any help would be very much appreciated - I've been stuck for a while! Thanks in advance.

回答1:

Welcome on StackOverflow! First of all, please know for next question that creating a jsFiddle (or similar) can be quite useful for users who want to help you in this kind of problem as playing with the code is often necessary. I created a jsFiddle with exactly your code here: http://jsfiddle.net/peDzT/

I have spent quite a bit of time figuring out what was happening in your source code. Here are a few remarks:

• You have two nested svgs
• In tick(), when you use path.attr("transform","null") it does nothing. Instead you have to do `path.select(".line").attr("transform", "null").
• In the other attr.transform() call, you forgot to call x() on the argument.

Final result: http://jsfiddle.net/chrisJamesC/YruDh/

In order to achieve this result I got inspired by another example I made previously, which is quoted in the following (related btw) question: Real time line graph with nvd3.js

来源：https://stackoverflow.com/questions/17181570/smooth-update-to-x-axis-in-a-d3-line-chart