Stacked bar going right to left instead of left to right - d3.js

Question

I'm trying to create a simple single stacked bar chart that goes left to right.
I've adapted the code found here, and I've gotten pretty close.
However, the stacked data is in the wrong direction.
The data at index 0 is all the right to the right, and the data at index 2 is all the way to the left.
I have a feeling it's got something to do with the rectangle and transition, but I'm not sure where I went wrong.
var rect = layer.selectAll("rect")
.data(function(d) {
return d;
})
.enter().append("rect")
.attr("y", function(d) {
return y(d.y);
})
.attr("x", 0)
.attr("height", y.rangeBand())
.attr("width", 0);
rect.transition()
.delay(function(d, i) {
return i * 10;
})
.attr("x", function(d) {
return x(d.x0 + d.x);
})
.attr("width", function(d) {
return x(d.x0) - x(d.x0 + d.x);
});
Fiddle

Answer 1

The main reason your stack starts at the right is that the range of your scale [width, 0] is inversely correlated to your domain [0, xStackMax]. Smaller input values will thus lead to larger output values, so your first x/x0 values will end up with values at the 'width' end of the scale.
Fix this so they both go in the same direction.
var x = d3.scale.linear()
.domain([0, xStackMax])
.range([0, width]);
Then change the x and width .attr calcs, the rects start at their scaled x0 coord and are as wide as the difference between x(d.x0 + d.x) - x(d.x0). For linear scales this can be simplified to x(d.x)
.attr("x", function(d) {
return x(d.x0);
})
.attr("width", function(d) {
return x(d.x0 + d.x) - x(d.x0);
});
https://jsfiddle.net/zkbxeby8/14/