D3-Format-源码浅析

  • 2022-04-02

考虑到 JavaScript 有时候不会以我们期望的方式显示数字,我们需要一些格式化工具,比如 d3-format

D3-Format 官网例子:

d3.format(“.0%”)(0.123); // rounded percentage, “12%”
d3.format(“($.2f”)(-3.5); // localized fixed-point currency, “(£3.50)”
d3.format(“+20”)(42); // space-filled and signed, " +42"
d3.format(“.^20”)(42); // dot-filled and centered, “…42…”
d3.format(“.2s”)(42e6); // SI-prefix with two significant digits, “42M”
d3.format(“#x”)(48879); // prefixed lowercase hexadecimal, “0xbeef”
d3.format(“,.2r”)(4223); // grouped thousands with two significant digits, “4,200”

formatSpecifier

d3-format 采用了和 python3’s format 一样的 specification mini-language

不过 python3 的 Format Specification Mini-Language 的 语法格式为:

[[fill]align][sign][#][0][width][grouping_option][.precision][type]

而 D3 对其做出了一些改动:

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

在 sign 中 增加了 \ 和 ( 两个字符

没有 #, 取而代之的是 symbol,等价于 增加了 $ 符号

没有 grouping_option, 取而代之的是 , 符号, 等价于 去除了 _ 符号

增加了一个 ~ 符号

完整 正则表达式 如下:

^(?:(.)?([<>=^]))?([+\-( ])?([$#])?(0)?(\d+)?(,)?(\.\d+)?(~)?([a-z%])?$

注:i 代表不区分大小写

D3 中 FormatSpecifier 负责解析所需格式

formatTypes

在知道了类型以后,由 formatTypes 进行类型处理

locale

local 采用了默认导出的方式 导出了一个默认函数, 该函数是一个闭包,返回 函数newFormat 和 函数formatPrefix

函数newFormat 也是个闭包, 对specifier进行处理, 返回了一个函数format

在 format 中, 对value进行了格式化操作

defaultLocale

最后 将其暴露在d3空间中