変更垂直積み上げバーから水平積み重ねバーd3.js

Question

こんにちは、私はd3と積み重ねバーで作業しています。縦型バーで積み上げたバーが正しく動作しています。

私の垂直機能これを行う..

var x = d3.scale.ordinal() 
    .rangeRoundBands([0, width], 0.3); 

    var y = d3.scale.linear() 
    .rangeRound([height, 0]); 

var dataIntermediate = options.map(function(item){ 
     return datos.map(function(d){ 
     if (item in d) 
      return {x:d.label, y:d[item]}; 
     else 
      return{x:d.label, y:0}; 
     }); 
    }); 

    var dataStackLayout = d3.layout.stack()(dataIntermediate); 

    x.domain(dataStackLayout[0].map(function (d) { 
     return d.x; 
    })); 

    y.domain([0, 
     d3.max(dataStackLayout[dataStackLayout.length - 1], 
      function (d) { 
       return d.y0 + d.y; 
      }) 
     ]) 
     .nice(); 

    var layer = svg.selectAll(".stack") 
     .data(dataStackLayout) 
     .enter().append("g") 
     .attr("class", "stack") 
     .style("fill", function (d, i) { 
      return color(i); 
     }); 

    layer.selectAll("rect") 
     .data(function (d) {return d; }) 
     .enter().append("rect") 
     .attr("x", function (d) { 
     return x(d.x); 
     }) 
     .attr("y", function (d) { 
     return y(d.y + d.y0); 
     }) 
     .attr("height", function (d) { 
     return y(d.y0) - y(d.y + d.y0); 
     }) 
     .attr("width", x.rangeBand()) 
     .on("mousemove", function(d){ 
     div.style("left", d3.event.pageX+10+"px"); 
     div.style("top", d3.event.pageY-25+"px"); 
     div.style("display", "inline-block"); 
     div.html((d.x)+"<br>"+"Code"+": "+(d.code)+"<br>"+"Value"+": "+(d.y)); 
     }) 
     .on("mouseout", function(d){ 
     div.style("display", "none"); 
     }); 

を私の横のバージョンでは、私は私が変更すべての私yためxとy0のための私のx0と万力詩を変更し、あまりにも

私のスケールを変更します

しかし、動作しません...任意のアイデア

Answer 1

あなたはyについてのxを交換する（そして、あなたが述べたようにスケールを変更する）、おそらくいくつかの他のステップがありますが、私が思う正しい考えを持っている、など幅と高さの2つのキーの変更として。

簡単な注意点は、y座標がheightから始まり、ゼロに向かうことです。 x座標では、ゼロから始まり、あなたの道を進めます（widthへ）。したがって、xをyに置き換えた場合は、右から始まる横棒グラフが表示されます（これは望ましいことかもしれません）。あなたの例では

さらに重要なのは、：

.attr("y", function (d) { 
    return y(d.y + d.y0); 
    }) 
    .attr("height", function (d) { 
    return y(d.y0) - y(d.y + d.y0); 
    }) 

開始のy属性がよさそうだが、height属性は、データ値に依存すべきではない、それはy.bandwidthに等しくなければなりません（）。

同様にxについて：

.attr("x", function (d) { 
    return x(d.x); 
}) 
.attr("width", x.rangeBand()) 

水平スタック型バーの各部分の幅は、データ値に依存しなければなりません。これはattrの "height"を "width"に入れ替えたり、その逆にすることで解決できます。

bl.ocks.orgの2つの向きの比較を作成しました。これはMike Bostockのブロックに基づいた横棒グラフですが、各行の元の内容を示すコメントが付いています。それはここに見つけることができます：https://bl.ocks.org/andrew-reid/0aedd5f3fb8b099e3e10690bd38bd458