Animated Sort Stacked Bar Chart D3.js

I want to animate a sort of stacked bar chart from this chart with params like in this chart I well succeed to sort x axis, but I didn't succeed to move stacked bars. here is my co

Solution 1:

This can be done like this. Giving a class to the g group which holds the full stack:

//Now each g which holds a stack has a class for selection.var state = svg.selectAll(".state").data(data).enter().append("g").attr("class", "g").attr("transform", function (d) {
    return"translate(" + x(d.State) + ",0)";
}).attr("id", function (d) {

    return d.State;
}).attr("class", "stack");

And then in the change code which triggers on change of the select do transition like this:

//translate the stack post sorting.
    transition.selectAll(".stack")
        .delay(delay)
        .attr("transform", function (d) {

        return"translate(" + x0(d.State) + ",0)";
    });

I have added comments in code for you to understand the demo.

Full working fiddle here.