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.
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
