d3.js bar chart animations

Question

I'm working on this bar chart application.

http://jsfiddle.net/NYEaX/166/

How do I

a) animate the bars so they grow from the bottom b) morph the axis accordingly to the new data set

animateBars: function(data){

                        var svg = d3.select(methods.el["selector"] + " .barchart");
                        var barrects = d3.select(methods.el["selector"] + " .barrects");


                        var initialHeight = 0;      



                        var bar = barrects.selectAll("rect")
                            .data(data);

                        // Enter
                        bar.enter()
                            .append("rect")
                            .attr("class", "bar")
                            .attr("y", initialHeight);

                        // Update
                        bar
                            .attr("height", initialHeight)
                            .transition()
                            .duration(500)
                            .attr("x", function(d) { return methods.x(d.letter); })
                            .attr("width", methods.x.rangeBand())
                            .attr("y", function(d) { return methods.y(d.frequency); })
                            .attr("height", function(d) { return methods.height - methods.y(d.frequency); })

                        // Exit
                        bar.exit()
                            .transition()
                            .duration(250)
                            .attr("y", initialHeight)
                            .attr("height", initialHeight)
                            .remove();



                    },

Answer 1

For the former, set the y attribute to be the max height instead of 0:

.attr("y", methods.height)

For the latter, recompute the x domain and call the axis component again:

methods.x.domain(data.map(function(d) { return d.letter; }));
svg.select("g.x").call(methods.xAxis);

Complete example here .