如何将D3.js X轴负号从MINUS(U+2212)改为HYPHEN-MINUS(U+002D)

你之前的代码问题出在直接把locale对象传给了tickFormat，tickFormat需要的是一个格式化函数，而非locale配置对象。正确的做法是通过locale生成对应的格式化器，再传递给轴的tickFormat方法。

正确实现方式 #

方法一：使用locale生成格式化函数 #

先通过d3.formatLocale创建自定义locale，再调用其format方法生成格式化函数，将这个函数传给tickFormat：

// 创建自定义locale，指定负号为HYPHEN-MINUS (U+002D)
const locale = d3.formatLocale({
  minus: '\u002D',
});

// 生成格式化函数，空字符串表示使用默认格式，也可指定如'g'、'.2f'等格式
const customFormat = locale.format('');

const xAxisGroup = d3.select(ref.current);
xAxisGroup.selectAll('g').remove();

xAxisGroup
  .append('g')
  .attr('transform', `translate(0,${DEFAULTS.margin.top})`)
  .call(
    d3.axisTop(x)
      .tickFormat(customFormat) // 传入生成的格式化函数
      .ticks(DEFAULTS.width / 80),
  );

方法二：手动替换负号（简单场景） #

如果仅需简单替换负号，无需复杂数值格式化，也可直接在tickFormat里手动替换字符：

const xAxisGroup = d3.select(ref.current);
xAxisGroup.selectAll('g').remove();

xAxisGroup
  .append('g')
  .attr('transform', `translate(0,${DEFAULTS.margin.top})`)
  .call(
    d3.axisTop(x)
      .tickFormat(d => {
        // 将MINUS (U+2212)替换为HYPHEN-MINUS (U+002D)
        return d.toString().replace('\u2212', '\u002D');
      })
      .ticks(DEFAULTS.width / 80),
  );

关键说明 #

• d3.formatLocale用于配置数值格式化的区域规则（如负号、千分位分隔符等），但它本身不是格式化函数，必须通过format()方法生成具体的格式化器。
• 若需对数值做精细格式化（如保留小数位数、科学计数法），可在locale.format()中指定格式字符串，例如locale.format('.2f')表示保留两位小数。

内容的提问来源于stack exchange，提问作者Hatice Yazıcı