Javascript d3.js堆叠图表动画

我正在开发一个堆叠图表应用程序

我把它放在一个jquery插件中，用来创建多个实例等等。。。不同的属性和最终不同的数据源

目前，我在设置图表栏和轴的动画时遇到问题

条码动画

animateBars: function(selector, data){

                        var w = $(selector).data("width");
                        var h = $(selector).data("height");

                        var margin = methods.getMargin(h);                      
                        methods.setDimensions(w, h, margin);

                        //methods.setX();
                        //methods.setY();

                        //methods.setDomain(data);


                        var initialHeight = 0;

                        //var svg = d3.select(selector + " .stackedchart");

                        var barholder = d3.select(selector + " .barholder");


                        var state = barholder.selectAll(".state")
                          .data(data)
                            .enter()
                                .append("g")
                                .attr("class", "g")
                                .attr("x", function(d) { 
                                    return methods.x(d.Label); 
                                })
                                .attr("transform", function(d) { 
                                    return "translate(" + methods.x(d.Label) + ",0)";
                                });

                        var bar = state.selectAll("rect")
                            .data(function(d) {
                                return d.blocks; 
                            });

                        // Enter
                         bar.enter()
                            .append("rect")
                            .attr("width", methods.x.rangeBand())                     
                            .attr("y", function(d) { 
                                return methods.y(d.y1); 
                            })
                            .attr("height", function(d) { 
                                return methods.y(d.y0) - methods.y(d.y1); 
                            })
                            .style("fill", function(d) { 
                                return methods.color(d.name); 
                            });

                        // Update
                        bar
                            .attr("y", function(d) { 
                                return methods.y(d.y1); 
                            })
                            .attr("height", function(d) {
                                return methods.y(d.y0) - methods.y(d.y1);
                            })
                            .transition()
                            .duration(500)
                            .attr("x", function(d) {
                                return methods.x(d.Label);
                            })
                            .attr("width", methods.x.rangeBand())
                            .attr("y", function(d) {
                                return methods.y(d.y1);
                            })
                            .attr("height", function(d) {
                                return methods.y(d.y0) - methods.y(d.y1);
                            });

                        // Exit
                        bar.exit()
                            .transition()
                            .duration(250)
                            .attr("y", function(d) {
                                return methods.y(d.y1);
                            })
                            .attr("height", function(d) {
                                return methods.y(d.y0) - methods.y(d.y1);
                            })
                            .remove();

                    }

---

一个问题是状态是从enter方法生成的，所以所有的bar调用只在生成g.class时执行，而不是在更新时执行。更改此项：

 var state = barholder.selectAll(".state")
                      .data(data)
                         .enter()
                            .append("g")...

为此：

 var state = barholder.selectAll(".state")
                      .data(data);
 state.enter().append("g")...

---

看看这是否有帮助。这似乎不会影响你的小提琴，但你可能会有其他问题，而不是d3。试着简化你的小提琴，首先让d3的东西自己工作

这似乎没有任何区别-。我还没有看到任何为堆叠图表设置动画的示例。我看过一个标准条形图动画的例子，但这就是我说的，但这是我看到的第一个明显的问题。您的代码也有许多相同的问题。另一个问题是，您正在bar.enter区域中设置条形高度，该区域也在“条形更新”和“过渡”中设置。我去掉了前两个，然后做了这个：轴心呢。也有一种方法可以把这些积木从地上长起来。对于前者，将y属性设置为max height，而不是0:.attry，methods.height我已设法使一些动画进行切换--动画函数在启动时生成nan值。不确定为什么-我已经在设置中删除了setDomain，现在让堆叠图表工作。但是，如果我启用其他图表（注释掉html），它会生成不同宽度/高度的堆叠图表，但不会更新/生成任何堆叠-