d3.js stacked chart animations

Question

I'm developing a stacked chart application.

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

                    }

score 0 · Answer 1 · answered Mar 06 '14 at 00:58

0

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.

answered Mar 06 '14 at 00:58

Glenn

5,334
4
28
31

It didn't appear to make any difference - http://jsfiddle.net/NYEaX/178/ . I haven't seen any examples which animate a stacked chart. I've seen an example that animates the standard bar chart but thats it – The Old County Mar 06 '14 at 01:18
As I said, but it's the first obvious problem I saw. Your code has a bunch of issues in the same vein. Another problem is that you're setting the bar height in the bar.enter() area which is also set on bar update and *again* inside the transition. I removed the first two and made this: http://jsfiddle.net/XnngU/ – Glenn Mar 06 '14 at 01:56
What about the axis. There was also a way of growing the blocks from the ground up. "For the former, set the y attribute to be the max height instead of 0: .attr("y", methods.height)" http://jsfiddle.net/NYEaX/168/ – The Old County Mar 06 '14 at 04:18
I've managed to get some animation going - on toggle - http://jsfiddle.net/XnngU/3/ - the animation function is producing nan values on start up. Not sure why – The Old County Mar 06 '14 at 10:58
Glenn - I've removed setDomain in the setup and now have the stacked chart working. However, if I enable the other charts - comment out the html - it produces the stacked chart at various widths/heights but does not update/produce any stacks - http://jsfiddle.net/XnngU/4/ – The Old County Mar 06 '14 at 11:05
Sorry, I don't have time to dig deeper into your problem. You'd have better luck stepping through the code with firebug, or adding traces, to narrow down the problems. Good luck! – Glenn Mar 06 '14 at 23:16
I've fixed the update issue - but sometimes one or more of the charts are blank - as if they have no y data - http://jsfiddle.net/XnngU/8/ – The Old County Mar 07 '14 at 12:44

d3.js stacked chart animations

1 Answers1