title: d3 stacked bar with bars don't update in a transition
body: <p>In sequence of this problem (<a href="https://stackoverflow.com/questions/28299330/d3-show-labels-only-for-ticks-with-data-in-a-bar-chart">d3 show labels only for ticks with data in a bar chart</a>) I've applied a transition to change the data of a stacked bar chart using D3.</p>
  
  <p>My axes have a perfect transition and modification for this new dataSet, but the horizontal bars are still untouched. 
  I've tried this solution from Lars (<a href="https://stackoverflow.com/questions/22410053/d3-js-bar-charts-transitioning-between-multiple-csv-files">d3.js bar charts transitioning between multiple csv files</a>) but I still can see the bars changed.</p>
  
  <p><strong>My code:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml" class="ocks-org do-not-copy"&gt;
  &lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div&gt;&lt;button class="btn btn-mini" id="backButton" onclick="updateData();"&gt;Update&lt;/button&gt;&lt;/div&gt;
  &lt;div id="timeLine"&gt;&lt;/div&gt;
  &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  var timeline;
  
  var margin = {
      top : 20,
      right : 10,
      bottom : 60,
      left : 80
  },
  width = 500 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;
  
  var x = d3.scale.linear()
      .rangeRound([0, width]);
  
  var y = d3.scale.ordinal()
      .rangeBands([height, 0], 0.1);
  
  var color = d3.scale.ordinal()
      .range(["#1f77b4", "#2ca02c", "#E53524"]);
  //var color = d3.scale.category10()
  
  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .tickFormat(d3.format(".2s"))
      .ticks(10);
  
  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .ticks(5);
  
  timeline = d3.select("#timeLine").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 + ")")
  
      var dataSet;
  
  dataSet = [{
          "Date" : "2014-01",
          "insert" : "2",
          "remove" : "17",
          "updates" : "27"
      }, {
          "Date" : "2014-02",
          "insert" : "27",
          "remove" : "127",
          "updates" : "47"
      }, {
          "Date" : "2014-03",
          "insert" : "227",
          "remove" : "17",
          "updates" : "42"
      }, {
          "Date" : "2014-04",
          "insert" : "0",
          "remove" : "0",
          "updates" : "0"
      }, {
          "Date" : "2014-05",
          "insert" : "127",
          "remove" : "1",
          "updates" : "423"
      },
  ];
  color.domain(d3.keys(dataSet[0]).filter(function (key) {
          return key !== "Date";
      }));
  
  dataSet.forEach(function (d) {
      var x0 = 0;
      d.ages = color.domain().map(function (name) {
              return {
                  name : name,
                  x0 : x0,
                  x1 : x0 += +d[name]
              };
          });
      d.total = d.ages[d.ages.length - 1].x1;
  });
  
  yAxis.tickFormat(function (d) {
      var val = 0;
      dataSet.forEach(function (item) {
          if (item.Date == d)
              val = item.total;
      });
      return val == 0 ? "" : d;
  });
  
  y.domain(dataSet.map(function (d) {
          return d.Date;
      }));
  
  x.domain([0, d3.max(dataSet, function (d) {
              return (d.total + 5);
          })]);
  
  timeline.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .append("text")
  .attr("x", 1)
  .attr("dx", "42em")
  .attr("dy", "3em")
  .style("text-anchor", "end")
  .text("Operations");
  
  timeline.append("g")
  .attr("class", "y axis")
  .call(yAxis);
  
  var layer = timeline.selectAll(".state")
      .data(dataSet)
      .enter().append("g")
      .attr("class", "rect")
      .attr("transform", function (d) {
          return "translate(0," + y(d.Date) + ")";
      });
  
  var rect = layer.selectAll("rect")
      .data(function (d) {
          return d.ages;
      })
      .enter().append("rect")
      .attr("class", "rect")
      .attr("width", 0)
      .attr("x", width)
      .attr('y', function (d, i) {
          return y(d.Date);
      })
      .attr("height", y.rangeBand())
      .style("fill", function (d) {
          return color(d.name);
      });
  
  rect.transition()
  .duration(600)
  .delay(function (d, i) {
      return i * 300;
  })
  .attr("width", function (d) {
      return x(d.x1) - x(d.x0);
  })
  .attr("x", function (d) {
      return x(d.x0);
  });
  
  function updateData() {
  
      dataSet = [{
          "Date" : "2014-11",
          "insert" : "27",
          "remove" : "1723",
          "updates" : "7"
      }, {
          "Date" : "2014-12",
          "insert" : "237",
          "remove" : "12",
          "updates" : "433"
      }, {
          "Date" : "2015-03",
          "insert" : "22",
          "remove" : "172",
          "updates" : "423"
      }, {
          "Date" : "2015-05",
          "insert" : "17",
          "remove" : "122",
          "updates" : "42"
      }, {
          "Date" : "2015-04",
          "insert" : "0",
          "remove" : "0",
          "updates" : "0"
      }
  ];
  
  dataSet.forEach(function (d) {
      var x0 = 0;
      d.ages = color.domain().map(function (name) {
              return {
                  name : name,
                  x0 : x0,
                  x1 : x0 += +d[name]
              };
          });
      d.total = d.ages[d.ages.length - 1].x1;
  });
  
  yAxis.tickFormat(function (d) {
      var val = 0;
      dataSet.forEach(function (item) {
          if (item.Date == d)
              val = item.total;
      });
      return val == 0 ? "" : d;
  });
  
  y.domain(dataSet.map(function (d) {
          return d.Date;
      }));
  
  x.domain([0, d3.max(dataSet, function (d) {
              return (d.total + 5);
          })]);
  
  // Make the changes
  var transition = timeline.transition().duration(750),
  delay = function (d, i) {
      return i * 50;
  };
  
  // update bars
  //var teste = timeline.selectAll(".state").data(dataSet);
  var layer = timeline.selectAll(".state").data(dataSet).enter().append("g")
      .attr("class", "rect")
      .attr("transform", function (d) {
          return "translate(0," + y(d.Date) + ")";
      });
  
  var sel = layer.selectAll("rect")
      .data(function (d) {
          return d.ages;
      })
      .enter().append("rect")
      .attr("class", "rect")
      .attr("width", 0)
      .attr("x", width)
      .attr('y', function (d, i) {
          return y(d.Date);
      })
      //.attr("height", y.rangeBand())
      .attr("height", y.rangeBand())
      .style("fill", function (d) {
          return color(d.name);
      });
  
  //remove bars no longer present - DON'T WORK
  //sel.exit().remove();
  
  sel.transition()
  .duration(600)
  .delay(function (d, i) {
      return i * 300;
  })
  .attr("x", function (d) {
      return x(d.x0);
  }).attr("width", function (d) {
      return x(d.x1) - x(d.x0);
  })
  .attr('y', function (d, i) {
      return y(d.Date);
  })
  .attr("height", y.rangeBand());
  
  transition.select(".y.axis") // change the y axis
  .call(yAxis);
  
  transition.select(".x.axis") // change the x axis
  .call(xAxis);
  
  }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks,
  Filipe</p>