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

【问题标题】：d3.js barchart plugin animation methodsd3.js 条形图插件动画方法
【发布时间】：2014-03-04 13:00:30
【问题描述】：

我在尝试构建这个基于 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)                      
                    }

【问题讨论】：

标签： javascript d3.js bar-chart

【解决方案1】：

我修复了您的 jsfiddle 中新栏的过渡。我希望它揭示了转换的功能：

http://jsfiddle.net/NYEaX/893/

工作原理：设置初始高度和 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); });

【讨论】：