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

One problem is that "state" is generated from the "enter()" method, so all your "bar" calls are only being executed when your "g.class" is being generated, not on update. Change this:

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

to this:

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

See if that helps a bit. It doesn't seem to affect your fiddle, but you might be having problems other than d3. Try simplifying your fiddle and get the d3 stuff working by itself first.