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);

此处提供完整示例。