d3-format 小记

D3自带的 d3.format() 是一个格式化数字的方法,和大部分的D3方法一样,调用后会返回一个新的方法,方便后面使用。

比如:

1
2
3
4
var FormatNumber1 = d3.format("s");
FormatNumber1(1500) // "1.50000k"
var FormatNumber2 = d3.format("~s");
FormatNumber2(1500) // "1.5k"

是不是很方便! 实际上 d3的format方法相当强大,可以把数字格式化为各种你需要的形式。通过方法的参数可以设置转换的规则,规则主要部分如下:

格式化字符串参数 :

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

格式符号都是可选字符,可以不要,但如果要且多个的话,请按其登场顺序进行组合。

表达式 说明 示例
[[fill]algin] 填充字段 > < = ^ ,algin “01.00100”
[sign] 正负数标记 “+11” “-11”
[symbol] 数字符号 “$836” “-¥836”
[0] 填充0需要和 [width]组合使用 “0000000012345678”
[width] 宽度 “ 12345678”
[,] 以千为分割打逗号 “12,345,678”
[.precision] 精度,根据[type]不同而不同,参考下文 “12.3500”
[~] 相当于trim(),设置后会去年多余的0 “12.35”
[type] 类型

虽然都是可选项,通常情况下很多格式化会连着一起使用:

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

[[fill]algin] :填充

由两部分组成

表达式 说明
fill 任意字符(只以是一个字符),默认为空格
algin 填充方式,必须以 填充符号+ 填充位数 来定义

其中填充符号有

比如

  1. a>16 表示用 a 向左填充一直到16位
  2. ^16 表示 用 空格 向左右填充(居中),一直到16位
1
2
3
4
5
6
7
8
d3.format('0^16')('111');	// "0000001110000000"	居中
d3.format('0<16')('111'); // "1110000000000000" 左
d3.format('0>16')('111'); // "0000000000000111" 右(默认)
d3.format('0=16')('111'); // "0000000000000111" 右
d3.format('^16')('111'); // " 111 " 居中
d3.format('<16')('111'); // "111 " 左
d3.format('>16')('111'); // " 111" 右(默认)
d3.format('=16')('111'); // " 111" 右

[sign] 正负数标记

可以取的值如下

1
2
3
4
5
6
7
8
d3.format('-')('11');	// "11"
d3.format('-')('-11'); // "-11"
d3.format('+')('11'); // "+11"
d3.format('+')('-11'); // "-11"
d3.format('(')('11'); // "11"
d3.format('(')('-11'); // "(11)"
d3.format(' ')('11'); // " 11"
d3.format(' ')('-11'); // "-11"

[symbol] 数字符号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
d3.format('$')('836');	// "$836"
d3.format('$')('-836'); // "-$836"
d3.formatDefaultLocale({currency:["¥",""]});
d3.format('$')('836'); // "¥836"
d3.format('$')('-836'); // "-¥836"
d3.formatDefaultLocale({currency:["¥","元"]});
d3.format('$')('836'); // "¥836元"
d3.format('$')('-836'); // "-¥836元"


d3.format('#')('0b10000000000') // "1024"
d3.format('#')('0o2000') // "1024"
d3.format('#')('0x400') // "1024"


d3.format('#')('0b10101010101') // "1365"
d3.format('#')('0o2733') // "1499"
d3.format('#')('0xaf15') // "44821"

[0][width][,]

1
2
3
4
5
6
7
8
9

d3.format('0')('12345678') // "12345678"
d3.format('016')('12345678') // "0000000012345678"
d3.format('0>16')('12345678') // "0000000012345678"
d3.format('16')('12345678') // " 12345678"
d3.format('>16')('12345678') // " 12345678"
d3.format(' >16')('12345678') // " 12345678"
d3.format(',')('12345678') // "12,345,678"
d3.format('016,')('12345678') // "0,000,012,345,678"

[.precision][~]

特别说明: 精度 [.precision] 一般情况下都是配合类型组合使用,在不同类型下,精度有不同的意义。

用于小数点的位数 :(常用) f 浮点型 、 % 百分比
精确到前n位: e g r s p
精确到前n位: b o d x

关于这些类型请往后看。

1
2
3
4
5
d3.format('.2f')('12.3456789')	// "12.35"
d3.format('.2f')('12') // "12.00"
d3.format('.2~f')('12') // "12"
d3.format('.2f')('12.3') // "12.30"
d3.format('.2~f')('12.3') // "12.3"

[type] 类型

最重要的在最后面,格式化后的类型

类型 说明 123456789
e 科学记数法 1.234568e+8
f 浮点型 123456789.000000
g 科学记数法 1.23457e+8
r 十进制,精确到指定位数 123457000
s 十进制,并以配置的单位标记 123.457M
% 将数字乘100后,转为浮点型,再加上一个百分号,通常是 0.123456 之类的数值 12345678900.000000%
p 将数字乘100后,转为10进制(整数),再加上一个百分号 12345700000%
b 二进制 111010110111100110100010101
o 八进制 726746425
d 十进制(整数) 123456789
x 十六进制小写 75bcd15
X 十六进制大写 75BCD15