Sequentially animate SVG path

[Victor Hwang]

I've got an intricate SVG path composed of many segments defined with M#,#L#,# M#,#L#,#.  I'd like to animate the drawing of this path, but in the order that they're listed.  I've tried the solutions listed here: http://stackoverflow.com/questions/13353665/cant-make-paths-draw-slowly-with-d3 , but they draw each segment of the path in parallel. How do I modify this so that they're animated sequentially?

[Tarun Gupta]

look at the line unrolling example in the following link Victor. helped me do a similar thing. the source is not available but you can probably figure that out from html source.

 

http://blog.visual.ly/creating-animations-and-transitions-with-d3-js/

On Sun, Jul 7, 2013 at 12:45 AM, Victor Hwang <victor....@gmail.com> wrote:

I've got an intricate SVG path composed of many segments defined with M#,#L#,# M#,#L#,#.  I'd like to animate the drawing of this path, but in the order that they're listed.  I've tried the solutions listed here: http://stackoverflow.com/questions/13353665/cant-make-paths-draw-slowly-with-d3 , but they draw each segment of the path in parallel. How do I modify this so that they're animated sequentially?

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[aRob]

This example, I believe does what you want, except Mike is using a set of points instead of a path: 

http://bl.ocks.org/mbostock/5649592

So, if you can find several key point coordinates of your path, then that example might work. You'll probably need many points for even the most simple paths for this code to render the correct path base on your coordinates. In the past I've used Photoshop's ruler tool to figure out the exact points of a design from the top left of the photoshop canvas area.

Hope that helped a bit.