Accepted answer

Interesting idea.

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

  .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.

  .attr("transform", function(d) {
    return "translate(" + x0(d.letter) + ",0)";

Putting this together.

Related Query

More Query from same tag