Javascript D3 JS：将垂直分组条形图转换为水平分组条形图

我不熟悉D3的世界。当我试图将其转换为水平分组条形图时，我面临着一个复杂的情况。我遵循中描述的转换要点。这是我的版本

我已经转换了水平组图表的所有域和范围，但不可能成功

var xScale = d3.scale.linear().range([innerHeight, 0]);
var yScale = d3.scale.ordinal().rangeBands([innerWidth, 0], barPadding);

bars.attr("y", function(d, i, j) {
    return yScale(d[yColumn]) + barWidth * j;
  })
  .attr("x", 0)
  .attr("height", barWidth)
  .attr("width", function(d) {
    return xScale(d.y);
  })

---

任何帮助都将不胜感激

这个转换比你一开始想象的要复杂一些。在您共享的代码段中，yScale的范围是

[innerWidth，0]

，而它应该是

[0，innerHeight]

。以下是相关部分。你可以看到它在现场运行

注意，我使用堆栈的布局d.x作为y轴的输入，d.y作为x轴的输入。这是因为d3.layout.stack没有方向作为参数

var yColumn = "country";
var xColumn = "population";

var xScale = d3.scale.linear().range([0, innerWidth]);
var yScale = d3.scale.ordinal().rangeBands([0, innerHeight], barPadding);
var colorScale = d3.scale.category10();

var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
  .ticks(5)
  .tickFormat(d3.format("s"))
  .outerTickSize(0);
var yAxis = d3.svg.axis().scale(yScale).orient("left")
  .outerTickSize(0);

function render(data) {

  var nested = d3.nest()
    .key(function(d) {
      return d[layerColumn];
    })
    .entries(data);

  var stack = d3.layout.stack()
    .y(function(d) { return d[xColumn];})
    .values(function(d) {return d.values;});

  var layers = stack(nested);

  yScale.domain(layers[0].values.map(function(d) {
    return d[yColumn];
  }));

  xScale.domain([
    0,
    d3.max(layers, function(layer) {
      return d3.max(layer.values, function(d) {
        return d.y;
      });
    })
  ]);

  colorScale.domain(layers.map(function(layer) {
    return layer.key;
  }));

  xAxisG.call(xAxis);
  yAxisG.call(yAxis);

  var layers = g.selectAll(".layer").data(layers);
  layers.enter().append("g").attr("class", "layer");
  layers.exit().remove();
  layers.style("fill", function(d) {
    return colorScale(d.key);
  });

  var bars = layers.selectAll("rect").data(function(d) {
    return d.values;
  });
  var barWidth = yScale.rangeBand() / colorScale.domain().length;
  bars.enter().append("rect")
  bars.exit().remove();
  bars
    .attr("y", function(d, i, j) {
      return yScale(d[yColumn]) + barWidth * j;
    })
    .attr("x", function(d) {
      return xScale(d.x);
    })
    .attr("height", barWidth)
    .attr("width", function(d) {
      return xScale(d.y);
    })

  colorLegendG.call(colorLegend);
}