d3.js right align nested bar chart

Question

I\'m working with this d3.js example and am looking to change the charts entire orientation to go instead from right to left.

I was able to reverse the x-axis scale:

Answer 1

The problem with this particular example is that the code is a bit confusing -- the positions of the rect elements are set in various non-obvious places. In particular, the transform you are setting is overwritten immediately by other code.

I've modified the example to do what you want here. The key points are that I'm moving the g element containing all bars to the right

var bar = svg.insert("g", ".y.axis")
  .attr("class", "enter")
  .attr("transform", "translate("+width+",5)")
.selectAll("g")
// etc

and setting the x position of the rect elements to be their negative width

bar.append("rect")
  .attr("x", function(d) { return width-x(d.value); })
  .attr("width", function(d) { return x(d.value); })
  .attr("height", barHeight);

The x position needs to be set in a few other places in the code in this way -- there're almost certainly more elegant ways to do this.