d3.js条形图动画

Question

我正在研究这个条形图应用程序。

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

我如何

a）使条形动画，使它们从底部生长 b）相应地将轴变形为新数据集

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

对于前者，将y属性设置为最大高度而不是0：

.attr("y", methods.height)

对于后者，重新计算x域并再次调用轴组件：

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

完整示例here。