使用d3.format时，如何实现百万单位小写M的更优格式化方案？

嘿，这个需求太常见了——D3默认遵循国际单位制规范，百万（mega）的符号是大写M，但客户有自己的显示要求时，完全不用在每个图表里重复改代码，这里有两个巧妙的方案：

方案1：包装现有格式化函数（快速简洁） #

直接在你现有的d3.format结果上做字符替换，只需要把原来的格式化变量替换成包装后的函数就行，不用动图表里的调用逻辑：

// 替换.2s格式的结尾大写M为小写m
const my_format = (value) => {
  return d3.format(".2s")(value).replace(/M$/, "m");
};

// 同理处理.3s格式
const my_format2 = (value) => {
  return d3.format(".3s")(value).replace(/M$/, "m");
};

这里的正则/M$/确保只替换结尾的大写M，不会误改其他位置的字符（格式化后的结果里M只会作为前缀在末尾，所以这个正则很安全）。

方案2：基于d3.formatPrefix自定义格式化（更灵活） #

如果以后可能需要调整其他SI前缀的显示，或者想要更可控的逻辑，可以用d3.formatPrefix手动处理前缀和数值：

// 封装一个可配置精度的自定义格式化函数
function customSiFormat(precision) {
  return (value) => {
    // 获取对应精度的SI前缀信息
    const prefixInfo = d3.formatPrefix(value, precision);
    // 替换百万的前缀为小写m，其他前缀保持默认
    const displayPrefix = prefixInfo.symbol === "M" ? "m" : prefixInfo.symbol;
    // 格式化数值并拼接前缀
    return `${d3.format(`.${precision}f`)(prefixInfo.scale(value))}${displayPrefix}`;
  };
}

// 使用时和原来的格式对应
const my_format = customSiFormat(2); // 对应原来的.2s
const my_format2 = customSiFormat(3); // 对应原来的.3s

这个方法的好处是，如果你之后需要调整其他前缀（比如把千位的k改成K），只需要在函数里加对应的判断就行，扩展性更强。

小提醒 #

D3默认用大写M是因为符合国际单位制（SI）的规范：大写M代表mega（10^{6），小写`m`代表milli（10}-3），所以默认行为是严谨的，但业务需求优先的话，上面的方案都能完美解决问题。

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