0

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.

Dan Kanze
  • 18,485
  • 28
  • 81
  • 134
user2477109
  • 45
  • 1
  • 5

1 Answers1

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

Community
  • 1
  • 1
Christopher Chiche
  • 15,075
  • 9
  • 59
  • 98
  • uao. This question solves my problem of out-of-sync axis and plot ( http://stackoverflow.com/q/25125534/433685 ) - even if I don't understand why - but I don't manage to replace `t` in your example with `new Date()` to make a time-labeled axis. Any hint? – nkint Aug 06 '14 at 12:29
  • also in the example you posted in the related question ( http://jsfiddle.net/chrisJamesC/buRcx/1/ ) if you put the `duration` at a small value (like 50) there is the out-of-sync problem: the axis is much more faster then the plot! – nkint Aug 06 '14 at 12:45
  • @ChristopherChiche - awesome thread here. I'm trying to figure out how to update the Y axis (scale) so that it adjusts to accommodate higher values. Can you show an example (js fiddle fork) of how I can accomplish that? – tamak May 05 '19 at 14:17
  • @tamak Thanks! I think the easiest would be to open another question for this specific issue with a minimal example of your issue. – Christopher Chiche May 06 '19 at 05:31