D3.js横向条形图柱体超出X轴、坐标轴范围异常问题排查

错误定位 #

核心问题是数据类型转换字段名不匹配，导致X轴比例尺定义域计算错误，附带3处可优化/无效逻辑：

• 核心错误：CSV加载完成后的数据遍历逻辑中，你将数值转换后的字段命名为sales_usd_billions（末尾多了一个s），但后续X轴定义域计算、柱宽映射时使用的仍是原始字符串类型的sales_usd_billion字段。d3.max对字符串按字典序而非数值序比较，例如样例数据中字符串"96.83"会被判定为大于"469.82"，最终计算出的最大值远小于真实数据最大值，比例尺映射关系完全失准，长柱自然超出X轴边界。
• 无效冗余代码：const max = d3.max(data, d => d.value)逻辑完全无效，数据集中不存在value字段，执行结果永远为undefined，不影响运行但属于无用代码。
• Y轴配置缺失：d3.scaleBand()未配置padding参数，同时柱高写死为4，会导致条形间距不可控，容易出现条形重叠问题。
• 排序逻辑反向：当前b.rank - a.rank的排序规则会将排名最高（rank值最小）的公司放在Y轴最底部，不符合常规条形图阅读习惯。

修正代码 #

1. 修正数据类型转换的字段名，确保后续计算使用数值类型字段：

data.forEach(d => {
  // 去掉字段名末尾多余的s，和后续调用的字段名保持一致
  d.sales_usd_billion = Number(d.sales_usd_billion)
})

2. 修正X轴比例尺配置，建议在最大值基础上预留5%右侧边距，避免最长柱贴边：

const x = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.sales_usd_billion) * 1.05])
  .range([0, WIDTH])

3. 补全Y轴比例尺的间距配置，柱高改为用比例尺自动计算，去掉写死的固定值：

const y = d3.scaleBand()
  .domain(data.map(d => d.company))    
  .range([HEIGHT, 0])
  .padding(0.2) // 可在0.1-0.3区间调整，控制条形上下间距

// 柱体属性配置修改为
rects.enter().append("rect")
  .attr("y", d => y(d.company))
  .attr("x", 0)
  .attr("width", d => x(d.sales_usd_billion))
  .attr("height", y.bandwidth()) // 自动适配Y轴条形高度
  .attr("fill", "grey")

4. （可选）调整排序规则，让排名最高的公司显示在Y轴最顶部：

data.sort(function(a, b) {
  return a.rank - b.rank;
})

5. 直接删除无效的const max = d3.max(data, d => d.value)及对应打印逻辑即可。

修正后X轴会按真实销售数据最大值做长度映射，柱体不会再超出边界，Y轴条形间距也会自动适配，不会出现重叠问题。

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