CODEWITHSUNDEEP
d3.js
Tim
Tim

Reputation: 959

Timing issue on multi-line chart?

I am working on a multi-line animated chart based on [Edit: not Bostock's] example:

http://bl.ocks.org/atmccann/8966400

I want the lines to appear synchronized by the date value on the x axis. If I slow down the graph (say to duration=15000) I can clearly see that in the very early part of the graph the green line is ahead of the black line. Then the black line moves ahead of the green line. Both start and end together.

The issue is accentuated in my chart where I am plotting 20 lines. Some are clearly ahead of the others when plotting. Lines with initial y values of zero shoot way ahead of those that climb to higher y values at the start. How can I adjust the display so both lines paint for the same date at the same time?

Upvotes: 1

Views: 74

Answers (1)

Stephen Thomas
Stephen Thomas

Reputation: 14053

The technique in the bl.ocks.org example (which, btw, is not Bostock's) is animating based on the length of the line, not it's position on the y-axis. If you want to animate based on the y-axis position, you'll have to use a different technique. Especially with 20 lines, I wouldn't recommend trying to dynamically update each line if they have a lot of points. You could do that if there aren't many points, though.

A simple approach would be to add a solid (white) rectangle to the chart that covers all the graph lines. Then animate the left position and width of that rectangle to reveal the lines over time.

Upvotes: 1

Related Questions