将垂直堆叠钢筋更改为水平堆叠钢筋d3.js

大家好，我正在与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");
      });

---

但是不要工作。。。任何想法

我认为您的想法是正确的，将x替换为y，并按照您的说明修改比例，但可能还有其他一些步骤，例如更改宽度和高度的两个关键点

一个简单的提示是y坐标从高度开始，一直到零。在x坐标下，从零开始计算宽度。所以，如果你把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属性看起来不错，但高度属性不应依赖于数据值，它应等于y.bandwidth

同样，对于x：

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

水平堆叠条的每个部分的宽度应取决于数据值。这可以通过将attr高度替换为宽度来解决，反之亦然

---

我在bl.ocks.org上对这两个方向进行了比较。这是一个基于Mike Bostock的一个块的水平条形图，但注释显示了每行的原始内容。可以在这里找到：

如果没有可复制的示例，很难说。。

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