D3设置tickFormat为d3.format('.1s')时y轴重复刻度值如何解决

问题根因 #

你使用的d3.format('.1s')规则为仅保留1位有效数字，而当前数值区间为604万~622万，所有数值的1位有效数字格式化结果均为6M；叠加scaleLinear调用nice()后自动生成的刻度间隔较小，最终出现重复刻度的展示问题。

可选解决方案 #

方案1：调整格式化精度，适配小差值区间 #

如果需要保留SI单位（M/K等）的展示习惯，可直接提升有效数字精度，或自定义动态精度规则，适配不同数值区间：

// 方案1a：直接调整为2位有效数字，格式化后会显示为6.0M、6.1M、6.2M，不会重复
let yAxis = d3.axisLeft(yScale)
       .tickPadding(7)
       .ticks(5)
       .tickFormat(d3.format(".2s"))

// 方案1b：自定义格式化函数，仅小差值区间使用高精度，兼顾其他区间的展示简洁性
const customTickFormat = (val) => {
  const lowPrecision = d3.format('.1s')
  const highPrecision = d3.format('.2s')
  // 可根据业务数值范围自定义判断规则
  return val >= 6000000 && val < 7000000 ? highPrecision(val) : lowPrecision(val)
}
let yAxis = d3.axisLeft(yScale)
       .tickPadding(7)
       .ticks(5)
       .tickFormat(customTickFormat)

方案2：手动指定刻度数组，完全控制刻度生成 #

如果不希望修改格式化规则，可通过tickValues()方法手动传入刻度值，跳过D3自动生成刻度的逻辑，从根源避免重复：

// 手动定义刻度，确保每个刻度格式化后唯一
const customTicks = [6000000, 6150000, 6300000]
let yAxis = d3.axisLeft(yScale)
       .tickPadding(7)
       .tickValues(customTicks)
       .tickFormat(d3.format(".1s"))

方案3：减少自动刻度数量，拉大开度间隔 #

如果需要保留原有格式化规则和自动刻度逻辑，可降低ticks()的传入值，让D3生成间隔更大的刻度，避免多个刻度落在同一精度区间：

// 刻度数量从5调整为3，自动生成的刻度间隔拉大，不会出现多个6M的情况
let yAxis = d3.axisLeft(yScale)
       .tickPadding(7)
       .ticks(3)
       .tickFormat(d3.format(".1s"))

最优方案选择 #

如果业务场景经常出现小范围波动的数值，优先选择自定义动态精度格式化函数的方案，兼顾不同区间的展示效果；如果仅为当前特例场景，优先选择调整刻度数量的方案，改造成本最低。

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