title: Animated sort stacked bar chart d3.js
body: <p>I want to animate a sort of stacked bar chart from <a href="http://bl.ocks.org/mbostock/3886208" rel="nofollow">this chart</a> with params like in <a href="http://bl.ocks.org/mbostock/3885705" rel="nofollow">this chart</a></p>
  
  <p>I well succeed to sort x axis, but I didn't succeed to move stacked bars.</p>
  
  <p>here is my code : </p>
  
  <ol>
  <li>HTML</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="test"&gt;
    Sort values
  &lt;/button&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="2">
  <li>CSS</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> body {
     font: 10px sans-serif;
   }
   .axis path,
   .axis line {
     fill: none;
     stroke: #000;
     shape-rendering: crispEdges;
   }
   .bar {
     fill: steelblue;
   }
   .x.axis path {
     display: none;
   }
   </code></pre>
  </div>
  </div>
  </p>
  
  <ol start="3">
  <li>JAVASCRIPT</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var margin = {
      top: 20,
      right: 20,
      bottom: 30,
      left: 40
    },
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
  
  var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
  
  var y = d3.scale.linear().rangeRound([height, 0]);
  
  var color = d3.scale.ordinal().range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
  
  var xAxis = d3.svg.axis().scale(x).orient("bottom");
  
  var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(d3.format(".2s"));
  
  var svg = d3.select("body").append("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  d3.csv("data.tsv", function(error, data) {
    if (error)
      throw error;
  
    color.domain(d3.keys(data[0]).filter(function(key) {
      return key !== "State";
    }));
  
    data.forEach(function(d) {
      var y0 = 0;
      d.ages = color.domain().map(function(name) {
        return {
          name: name,
          y0: y0,
          y1: y0 += +d[name]
        };
      });
      d.total = d.ages[d.ages.length - 1].y1;
    });
  
    //
  
    x.domain(data.map(function(d) {
      return d.State;
    }));
    y.domain([0, d3.max(data, function(d) {
      return d.total;
    })]);
  
    svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis);
  
    svg.append("g").attr("class", "y axis").call(yAxis).append("text").attr("transform", "rotate(-90)").attr("y", 6).attr("dy", ".71em").style("text-anchor", "end").text("Population");
  
    var state = svg.selectAll(".state").data(data).enter().append("g").attr("class", "g").attr("transform", function(d) {
      return "translate(" + x(d.State) + ",0)";
    });
  
    state.selectAll("rect").data(function(d) {
      return d.ages;
    }).enter().append("rect").attr("width", x.rangeBand()).attr("y", function(d) {
      return y(d.y1);
    }).attr("height", function(d) {
      return y(d.y0) - y(d.y1);
    }).style("fill", function(d) {
      return color(d.name);
    });
  
    var legend = svg.selectAll(".legend").data(color.domain().slice().reverse()).enter().append("g").attr("class", "legend").attr("transform", function(d, i) {
      return "translate(0," + i * 20 + ")";
    });
  
    legend.append("rect").attr("x", width - 18).attr("width", 18).attr("height", 18).style("fill", color);
  
    legend.append("text").attr("x", width - 24).attr("y", 9).attr("dy", ".35em").style("text-anchor", "end").text(function(d) {
      return d;
    });
  
    d3.select("#test").on("click", change);
  
    function change() {
  
      data.sort(function(a, b) {
        return b.total - a.total;
      });
  
      x.domain(data.map(function(d) {
        return d.State;
      }));
      y.domain([0, d3.max(data, function(d) {
        return d.total;
      })]);
  
      var transition = svg.transition().duration(750),
        delay = function(d, i) {
          return i * 50;
        };
  
      //problem seems coming from here
  
      transition.selectAll("g.rect").delay(delay).attr("width", x.rangeBand()).attr("y", function(d) {
        return y(d.y1);
      }).attr("height", function(d) {
        return y(d.y0) - y(d.y1);
      });
      //x axis is sorted
      transition.select(".x.axis").call(xAxis).selectAll("g").delay(delay);
    }
  
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for helping</p>