score:1

Accepted answer

That behaviour is actually expected: when you call the axis again, the axis generator resets the dx and dy attributes.

You can apply them again after the second call, just as you did in the first one, but you'll notice that the texts will quickly flicker before going to their new positions.

So, an easy alternative, that avoids the flickering, is setting the labels' positions using the rotate itself. For instance (hardcoded values):

.attr("transform", "rotate(-65 12 32)");

Here is the code with that change:

var margin = {
    top: 20,
    right: 20,
    bottom: 60,
    left: 40
  },
  width = 960 - margin.left - margin.right,
  height = 600 - margin.top - margin.bottom;
var formatPercent = d3.format(".0%");
var x = d3.scale.ordinal()
  .rangeRoundBands([0, width], .1, 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")
  .tickFormat(formatPercent);
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 + ")");
data = [{
    letter: "Alongname1",
    frequency: 0.08167
  },
  {
    letter: "Alongname2",
    frequency: 0.01492
  },
  {
    letter: "Alongname3",
    frequency: 0.0278
  },
  {
    letter: "Alongname4",
    frequency: 0.04253
  },
  {
    letter: "Alongname5",
    frequency: 0.12702
  },
  {
    letter: "Alongname6",
    frequency: 0.02288
  },
  {
    letter: "Alongname7",
    frequency: 0.02022
  },
  {
    letter: "Alongname8",
    frequency: 0.06094
  },
  {
    letter: "Alongname9",
    frequency: 0.06973
  },
  {
    letter: "Alongname10",
    frequency: 0.00153
  },
  {
    letter: "Alongname11",
    frequency: 0.00747
  },
  {
    letter: "Alongname12",
    frequency: 0.04025
  },
  {
    letter: "Alongname13",
    frequency: 0.02517
  },
  {
    letter: "Alongname14",
    frequency: 0.06749
  },
  {
    letter: "Alongname15",
    frequency: 0.07507
  },
  {
    letter: "Alongname16",
    frequency: 0.01929
  },
  {
    letter: "Alongname17",
    frequency: 0.00098
  },
  {
    letter: "Alongname18",
    frequency: 0.05987
  }
];
data.forEach(function(d) {
  d.frequency = +d.frequency;
});
x.domain(data.map(function(d) {
  return d.letter;
}));
y.domain([0, d3.max(data, function(d) {
  return d.frequency;
})]);
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .selectAll("text")
  .attr("transform", "rotate(-65 12 32)");
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("Frequency");
svg.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("class", "bar")
  .attr("x", function(d) {
    return x(d.letter);
  })
  .attr("width", x.rangeBand())
  .attr("y", function(d) {
    return y(d.frequency);
  })
  .attr("height", function(d) {
    return height - y(d.frequency);
  });
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.frequency - a.frequency;
        } :
        function(a, b) {
          return d3.ascending(a.letter, b.letter);
        })
      .map(function(d) {
        return d.letter;
      }))
    .copy();
  svg.selectAll(".bar")
    .sort(function(a, b) {
      return x0(a.letter) - x0(b.letter);
    });
  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.letter);
    });
  transition.select(".x.axis")
    .call(xAxis)
    .selectAll("g")
    .delay(delay);
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: relative;
  width: 960px;
}

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: steelblue;
  fill-opacity: .9;
}

.x.axis path {
  display: none;
}

label {
  position: absolute;
  top: 10px;
  right: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<label><input type="checkbox"> Sort values</label>


Related Query

More Query from same tag