スタックされたバーは左から右に行くのではなく、右から左に行く

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]); 

は次にCALCS .ATTR xおよび幅を変更、rectsは、そのスケーリングされたX0のCOORDで開始し、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/

に簡略化することができます