D3图表y轴重复显示相同刻度值（如1M）的问题咨询

• 第一：yAxisTickFormat 函数本身存在逻辑错误
  你设置了多余的中间阈值10000且对应单位为K，但计算时是除以10000而非1000，会导致10000~99999区间的数值显示完全错误，比如15000会被格式化为2K，而正确值应为15K。同时判断逻辑是d>limits[i]，搭配无参数的toFixed()（默认保留0位小数，自动四舍五入），会导致区间内多个不同原始值格式化后得到完全相同的字符串，比如1100000和1400000都会被格式化为1M，最终出现刻度重复。
• 第二：D3的ticks(n)只是生成近似n个的建议刻度，不会考虑你的格式化规则，自动生成的刻度落在同一个格式化区间时就会出现重复。

第一步：修正刻度格式化函数 #

删除多余的10000阈值，按标准的数值短缩逻辑调整，可根据需要保留小数避免重复：

export const yAxisTickFormat = (d) => {
  if (d >= 1000000) {
    // 保留1位小数，小数位为0时自动去掉小数点
    return (d / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
  } else if (d >= 1000) {
    return (d / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
  }
  return d;
};

第二步：手动对齐y轴域的最大值 #

将计算出的maxValue向上对齐到合适的步长，避免自动生成的刻度落在同一格式化区间：

const maxValue = storeData.dataset.reduce((maxAll, item) => {
  return item.values.reduce((maxItem, val) => 
    Math.max(maxItem, val.value), maxAll);
}, 0);
// 向上对齐到100000的整数倍，可根据你的数值范围调整步长
const alignedMax = Math.ceil(maxValue / 100000) * 100000;
yScale.domain([alignedMax, 0]);

第三步（可选）：手动指定刻度值 #

如果需要完全控制刻度不重复，可以直接用tickValues指定你需要的刻度，替代自动生成的ticks(5)：

const yAxis = d3
  .axisLeft()
  .scale(yScale)
  .tickFormat((d) => (d === 0 ? null : '£') + yAxisTickFormat(d))
  // 手动指定刻度，数量、数值完全可控
  .tickValues([alignedMax, alignedMax*0.75, alignedMax*0.5, alignedMax*0.25, 0])
  .tickSize(-width, barMargin, 0)
  .tickPadding(10);

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