堆叠酒吧从右到左而不是从左到右

Question

我正在尝试创建一个从左到右的简单单个堆叠条形图。

我修改了代码found here，我已经非常接近了。 但是，堆叠数据的方向是错误的。

索引0处的数据全部都是右边的数据，而索引2处的数据全是左边的数据。

我有一种感觉，它与矩形和过渡有关，但我不确定我出错的地方。

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

您的堆栈开始于右侧的主要原因是，你的刻度的范围[宽度，0]被逆到您的域[0，xStackMax]相关。因此，较小的输入值将导致较大的输出值，因此，您的第一个x/x0值将以该值的“宽度”结尾处的值结束。

解决这个问题，让它们都朝着相同的方向前进。

var x = d3.scale.linear() 
    .domain([0, xStackMax]) 
    .range([0, width]); 

然后改变x和宽度.attr Calcs（计算）时，开始rects在它们的缩放坐标X0和如宽为x（d.x0 + d.x）之间的差 - X（d.x0）。为线性刻度这个可以被简化到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/