title: labels are not getting sorted in sortable barchart d3.js
body: <p>I am a newbie to D3.js.I am trying to built a sortable bar chart using it.In my code, the bars are getting sorted properly but the labels on each bars are not getting sorted.I am not able to figure out where is the mistake?</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt;
  .bar{
  fill:steelblue;
  fill-opacity: .9;
  } 
  
  .text {
    fill: green;
  }
  .bar:hover {
    fill: #F18E18;
  }
  
  .axis {
    font: 10px sans-serif;
  }
  
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  
  .x.axis path {
    display: none;
  }
  label {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  
  &lt;/style&gt;
  &lt;body&gt;
  &lt;label&gt;&lt;input type="checkbox"&gt; Sort values&lt;/label&gt;
  
  &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  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()
      .range([height, 0]);
  
  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");
  
  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .ticks(20, ".");
  
  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.tsv("humanweight.tsv", type, function(error, data) {
  
    x.domain(data.map(function(d) { return d.age; }));
    y.domain([0, d3.max(data, function(d) { return d.fatness; })]);
  
    svg.append("text")
      .attr("x", width / 2 )
      .attr("y", 0)
      .style("text-anchor", "middle")
      .text("Human Age-Fatness");
  
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
      .append("text")
        .attr("x",900)
        .style("text-anchor", "start")
        .text("Age");
  
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 8)
        .attr("dy", ".71em")
        .style("text-anchor", "middle")
        .text("Fatness");
  
    svg.selectAll(".bar")
        .data(data)
        .enter()
        .append("rect")
        .attr("class", "bar")
        .transition().delay(function(d,i){return i*50;})
        .duration(700)
        .attr("x", function(d) { return x(d.age); })
        .attr("width", x.rangeBand())
        .attr("y", function(d) { return y(d.fatness); })
        .attr("height", function(d) { return height - y(d.fatness); });
  
  svg.selectAll(".text")
        .data(data)
        .enter()
        .append("text")
        .text(function(d) {
                  return d.fatness;
          })
        .attr("x", function(d,i) {
  
          return i*(width/data.length)+20;
          })
        .attr("y", function(d) {
          return height-(d.fatness*10);
          })
          .attr("font-family", "sans-serif")
          .attr("font-size", "11px")
          .attr("fill", "black"); 
  
  d3.select("input").on("change", change);
  
    var sortTimeout = setTimeout(function() {
      d3.select("input").property("checked", true).each(change);
    }, 2000);
  
    function change() {
      clearTimeout(sortTimeout);
  
      // Copy-on-write since tweens are evaluated after a delay.
      var x0 = x.domain(data.sort(this.checked
          ? function(a, b) { return b.fatness - a.fatness; }
          : function(a, b) { return d3.ascending(a.age, b.age); })
          .map(function(d) { return d.age; }))
          .copy();
  
      var transition = svg.transition().duration(750),
          delay = function(d, i) { return i * 50; };
  
      transition.selectAll(".bar")
          .delay(delay)
          .attr("x", function(d) { return x0(d.age); });
  
      transition.selectAll(".text")
          .delay(delay)
          .attr("x", function(d) { 
          console.log(d.fatness);
          return x0(d.age); })
          .attr("y", function(d) { return height-(d.fatness*10);
          });
          /*.text(function(d) {
                  return d.fatness;
          })
          .attr("x", function(d,i) {
                return i*(width/data.length)+20;
          })
          .attr("y", function(d) {
          return height-(d.fatness*10);
          })
          .attr("font-family", "sans-serif")
          .attr("font-size", "11px")
          .attr("fill", "white"); 
          */
      transition.select(".x.axis")
          .call(xAxis)
          .selectAll("g")
          .delay(delay);  
    }
     });
  
  function type(d) {
    d.fatness = +d.fatness;
    return d;
  }
  
  &lt;/script&gt;
  &lt;body&gt;
  </code></pre>