[Solved]-How to sort bar charts synchronous with the ticks of x axis-d3.js

Interesting idea.

You can get the rects grouped with each tick's g by:

svg.selectAll(".x>.tick")
  .data(data)
  .append("rect")
  .attr("class", "bar")
  .attr("x", function(d) {
    return -x.rangeBand()/2; // set x to be half width, tick g will position it
  })
  .attr("width", x.rangeBand())
  .attr("y", function(d) {
    return -(height - y(d.frequency)); // set y to negative
  })
  .attr("height", function(d) {
    return height - y(d.frequency);
  });

You then have to rewrite the transition since calling .call(xAxis); will recreate the tick g and remove the bars.

transition.selectAll(".x>.tick")
  .delay(delay)
  .attr("transform", function(d) {
    return "translate(" + x0(d.letter) + ",0)";
  });

Putting this together.