Question

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

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

d3.js barchart插件动画方法

1 个答案: