文章目录
  1. 1. 格式化字符串参数 :
  2. 2. [[fill]algin] :填充
  3. 3. [sign] 正负数标记
  4. 4. [symbol] 数字符号
  5. 5. [0][width][,]
  6. 6. [.precision][~]
  7. 7. [type] 类型

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] 正负数标记

可以取的值如下

  • - 0 与正数不给标记,负数给 - (默认)
  • + 0与正数给 + 负数给-
  • ( 0 与正数不给标记,负数用 括号() 包起来
  • 空格:0与正数给一个空格,负数给 -
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] 数字符号

  • $ 货币符号,增加本地化的符号
  • # 二进制(0b)、八进制(0o)、十六进制(0x)转10进制
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][,]

  • [0][width] 和第一个 [[fill]algin] 有点像,如果设置了0就相当于填充0,不设置就填充空格 所有 016 就等效于 0>1616 就等效于 >16>16。 单独一个 0 没什么用
  • [,] 如果设置了逗号的话,会以千为单位(每三位)加入一个逗号
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] 代表精度,即小数点后面的位数,对于某些类型。
  • [~] 设置了 ~ 参数后,会自动 trim 掉没必要的0

特别说明: 精度 [.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
文章目录
  1. 1. 格式化字符串参数 :
  2. 2. [[fill]algin] :填充
  3. 3. [sign] 正负数标记
  4. 4. [symbol] 数字符号
  5. 5. [0][width][,]
  6. 6. [.precision][~]
  7. 7. [type] 类型