求助：将D3.js v4垂直堆叠条形图转为水平堆叠条形图

嘿，我懂你把垂直堆叠条形图改成水平版本时遇到的条形重叠糟心事——这在D3里是个挺常见的小误区，我来帮你拆解问题、搞定修复！

核心问题在于：把垂直转水平时，你需要彻底互换x轴和y轴的角色，同时调整堆叠计算的方向、条形的位置与尺寸属性，少改一项就容易出现重叠。下面是具体的修复步骤和关键代码调整：

1. 调整堆叠布局的计算方向 #

原来的垂直堆叠是沿着y轴累积数值，转水平后要改成沿着x轴累积。你需要明确指定堆叠布局的访问器，让它计算x方向的堆叠起始值（x0）和堆叠长度（x）：

// 替换原来的stack初始化，确保堆叠基于x轴数值
var stack = d3.layout.stack()
  .offset("zero") // 保持常规堆叠，也可以选其他offset类型
  .values(function(d) { return d.values; }) // 你的数据数组字段
  .x(function(d) { return d.value; }) // 对应数值字段（原来的y字段）
  .y(function(d) { return d.category; }); // 对应分类字段（原来的x字段）

2. 交换坐标轴比例尺 #

把原来的分类轴和数值轴的位置互换：

// x轴现在是数值比例尺，范围从0到所有堆叠的最大值总和
var xScale = d3.scale.linear()
  .domain([0, d3.max(layers, function(layer) {
    return d3.max(layer.values, function(d) { return d.x0 + d.x; });
  })])
  .range([0, width]);

// y轴现在是分类比例尺，对应你的分类项
var yScale = d3.scale.ordinal()
  .domain(layers[0].values.map(function(d) { return d.category; }))
  .rangeRoundBands([0, height], 0.08); // 保持分类间的间距

3. 修改条形的位置与尺寸属性 #

这是最容易出错的地方！垂直条形的x/y/width/height要完全对应换成水平版本的属性：

// 绘制水平堆叠条形
svg.selectAll(".layer")
  .data(layers)
  .enter().append("g")
  .attr("class", "layer")
  .style("fill", function(d, i) { return colorScale(i); })
  .selectAll("rect")
  .data(function(d) { return d.values; })
  .enter().append("rect")
  // 垂直条形用x，水平条形用y指定分类位置
  .attr("y", function(d) { return yScale(d.category); })
  // 垂直条形用y，水平条形用x指定堆叠起始位置
  .attr("x", function(d) { return xScale(d.x0); })
  // 垂直条形用height，水平条形用width指定堆叠长度
  .attr("width", function(d) { return xScale(d.x0 + d.x) - xScale(d.x0); })
  // 垂直条形用width，水平条形用height指定分类高度
  .attr("height", yScale.rangeBand());

4. 更新坐标轴的绘制 #

最后别忘了把坐标轴的方向和位置也调整过来：

// x轴（数值轴）放在底部
var xAxis = d3.svg.axis()
  .scale(xScale)
  .orient("bottom")
  .ticks(5);

// y轴（分类轴）放在左侧
var yAxis = d3.svg.axis()
  .scale(yScale)
  .orient("left");

// 添加到SVG中
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis);

只要你把这些对应调整到位，堆叠的水平条形就不会再重叠啦！注意要根据你自己的实际数据字段替换代码里的category、value这些占位符哦。

内容的提问来源于stack exchange，提问作者Pinki Sharma