javascript - d3.js stacked chart animations

Question

I'm developing a stacked chart application.

http://jsfiddle.net/NYEaX/174/

I've placed it inside a jquery plugin to create multiple instances etc... different properties and eventually different data sources.

For now I am having problems animating the chart bars and the axis.

Animate bar code

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

                    }

Answer 1

一个问题是“状态”是从“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 的东西自己工作。