Javascript d3.js条形图插件动画方法

我在尝试构建这个基于jquery的d3.js条形图插件时遇到了问题

杆向左移动，不知道为什么

条形图不会更新为新数据 我试着让这些条带上动画，但没有成功

下面是动画条功能

animateBars: function(data){

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

                        var bars = svg.selectAll(".bar")
                                        .data(data);

                            bars            
                            .enter().append("rect")
                              .attr("class", "bar")
                              .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); })
                              .transition()
                                .duration(300)

                            bars
                                .transition()
                                .duration(300)      

                            bars.exit()
                                .transition()
                                .duration(300)                      
                    }

---

我修复了JSFIDLE中新条的过渡。我希望它能揭示过渡的功能：

工作原理：设置初始高度和y值后，将向终点高度和y值添加过渡

bars            
 .enter().append("rect")
  .attr("class", "bar")
  .attr("x", function(d) { return methods.x(d.letter); })
  .attr("width", methods.x.rangeBand())
  .attr("y", function(d) { return methods.y(0); })
  .attr("height", function(d) { return methods.height - methods.y(0); })
 .transition().duration(1000)
  .attr("y", function(d) { return methods.y(d.frequency); })
  .attr("height", function(d) { return methods.height - methods.y(d.frequency); });