深入理解D3.js中的数字格式化工具d3-format-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00242/article/details/148323017

深入理解D3.js中的数字格式化工具d3-format

d3 Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada: 项目地址: https://gitcode.com/gh_mirrors/d3/d3

为什么需要数字格式化

在JavaScript中处理数字时，开发者经常会遇到一些令人困惑的现象。比如下面这个简单的循环：

for (let i = 0; i < 10; ++i) {
  console.log(0.1 * i);
}

输出结果可能出乎意料：

0
0.1
0.2
0.30000000000000004
0.4
0.5
0.6000000000000001
0.7000000000000001
0.8
0.9

这种现象源于计算机使用二进制浮点数表示十进制数时的精度问题。但数字格式化的需求远不止解决这种精度问题：

表格中的数字需要一致的格式以便比较
大数字需要分组显示（如42,000）或使用科学计数法（4.2e+4）
货币需要固定精度（$3.50）
报告中的数值结果需要四舍五入到有效数字（4021变为4000）
数字格式需要适应当地语言环境（42.000,00或42,000.00）

d3-format基础用法

d3-format模块正是为解决这些问题而设计，它借鉴了Python 3的格式化规范迷你语言。使用d3-format重写上面的例子：

const f = d3.format(".1f");
for (let i = 0; i < 10; ++i) {
  console.log(f(0.1 * i));
}

现在输出符合预期：

0.0
0.1
0.2
0.3
0.4
0.5
0.6
0.7
0.8
0.9

格式化规范详解

d3-format的格式化规范语法如下：

[[fill]align][sign][symbol][0][width][,][.precision][~][type]

对齐方式（align）

>：右对齐（默认）
<：左对齐
^：居中对齐
=：类似>，但符号和前缀在填充左侧

符号显示（sign）

-：负数显示减号（默认）
+：正数显示加号，负数显示减号
(：负数用括号括起来
（空格）：正数显示空格，负数显示减号

特殊符号（symbol）

$：使用本地定义的货币符号
#：为二进制、八进制或十六进制添加前缀（0b、0o、0x）

其他选项

0：启用零填充，隐式设置fill为0，align为=
width：定义最小字段宽度
,：启用千位分隔符
.precision：定义精度
~：修剪不重要的尾随零

格式类型（type）

e：科学计数法
f：定点表示法
g：自动选择e或f，四舍五入到有效数字
r：十进制表示法，四舍五入到有效数字
s：带SI前缀的十进制表示法
%：百分比表示法
p：百分比，四舍五入到有效数字
b：二进制
o：八进制
d：十进制
x：十六进制（小写）
X：十六进制（大写）
c：字符数据

实用示例

d3.format(".0%")(0.123)  // "12%"
d3.format("($.2f")(-3.5) // "(£3.50)"
d3.format("+20")(42)     // "                 +42"
d3.format(".^20")(42)    // ".........42........."
d3.format(".2s")(42e6)   // "42M"
d3.format("#x")(48879)   // "0xbeef"
d3.format(",.2r")(4223)  // "4,200"

本地化支持

d3-format支持本地化数字格式：

const enUs = d3.formatLocale({
  decimal: ".",
  thousands: ",",
  grouping: [3],
  currency: ["$", ""]
});

const de = d3.formatLocale({
  decimal: ",",
  thousands: ".",
  grouping: [3],
  currency: ["", "€"]
});

高级功能

自动SI前缀

const f = d3.formatPrefix(",.0", 1e6);
f(4200000); // "4M"

精度计算

d3-format提供了几个辅助函数帮助确定合适的精度：

// 固定小数点精度
d3.precisionFixed(0.01) // 2

// 带前缀的精度
d3.precisionPrefix(1e5, 1.3e6) // 1

// 四舍五入精度
d3.precisionRound(0.01, 1.01) // 3

格式化规范解析

可以使用formatSpecifier解析格式字符串：

const spec = d3.formatSpecifier(".2f");
// {
//   fill: " ",
//   align: ">",
//   sign: "-",
//   symbol: "",
//   zero: false,
//   width: undefined,
//   comma: false,
//   precision: 2,
//   trim: false,
//   type: "f"
// }