堆疊酒吧從右到左而不是從左到右

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/