D3堆叠条形图部分条形不显示、超出Y轴、位置偏左问题如何修复

1. 分类渲染缺失、条形超出Y轴、第二组数据不显示问题 #

原因 #

• Y轴定义域设置错误：堆叠条形图的Y轴上限需要取所有分类的堆叠总高度的最大值，当前代码取的是单个数据项的最大值，堆叠后总高度超过上限，就会出现条形超出Y轴、小数值分类被挤出可视区域的问题
• E分类数值和其他分类差值超过4个数量级，计算出的条形高度小于1px，浏览器默认不渲染
• 冗余代码无意义：定义的cost数组没有参与堆叠计算、坐标轴值域计算，完全无效
• x轴值域设置不合理：自定义xScaleRange = 数据条数*120，没有使用预设的画布宽度width，容易出现坐标计算偏差

修复代码 #

// 1. 删除冗余的cost数组相关代码
// 2. 替换原y.domain的代码，计算每个分类的总和取最大值作为Y轴上限
y.domain([0, d3.max(data, d => keys.reduce((sum, key) => sum + d[key], 0))]).nice()
// 3. 替换x轴scale的range配置，用预设的width作为x轴总宽度
const x = d3.scaleBand()
         .rangeRound([0, width])
         .padding(0.1)
// 4. 可选：增加最小高度判断，保证极小值分类可见
.attr("height", d => {
  const h = y(d[0]) - y(d[1])
  return h < 1 ? 1 : h
})

2. 固定宽度条形不居中问题 #

原因 #

scaleBand返回的x坐标是每个分类区块的左边缘坐标，固定条形宽度为25px后，需要手动计算偏移量，让条形在分类区块内居中。

修复代码 #

替换rect的x属性赋值逻辑：

.attr("x", d => {
  return x(d.data.category) + (x.bandwidth() - 25) / 2
})

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