Question

Is there an equivalent to jQuery’s slideDown method for SVG elements? Right now the elements just show up rather suddenly. I would like to soften that a little by sliding down.

Edit:
I’m basing my code on the dynamic stacked bar graph here: http://benjchristensen.com/2011/12/16/dynamic-stacked-bar-chart-using-d3-js/

Instead of one graph with many bars, I have many graphs with one bar. I want to make it so that when the graphs appear, it will slowly slide down.

Answer 1

I don’t believe that SVG is easily supported by jQuery. Keith Wood has a SVG specific jQuery library that allows you to do some animation though.

A different option would be to use a graphics library that works with SVG. The first that comes to mind is D3.js, which provides some very easy to use methods for manipulating SVG elements. Additionally, the selector style is similar to what you may be used to for jQuery.

If you’re using D3, I’d check out the transition methods. There’s quite a bit you can do and D3 is incredibly powerful. An example would be:

var rect = d3.select('#rectangle');
// this selects a rectangle.  Let's say that it starts at 
// the origin, or even off screen in your case   

rect.transition()
    .duration(250)
    .attr('x', 10)
    .attr('y', 20); 
    // this changes the x and y attributes
    // of the rectangle to 10 and 20 respectively
    // using a transition over a 250ms duration.

For the particular example that you gave, I would just change the y attribute so that it starts off screen (say y = -1 * height) and then transition it down to y = height or y = 200 or something like that.