X.d 笔记

小Web,大世界

0%

d3-format 小记

发表于

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

比如：

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位
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与正数给一个空格，负数给 -
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进制
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>16 而 16 就等效于 >16 或 >16。 单独一个 0 没什么用
  • [,] 如果设置了逗号的话，会以千为单位（每三位）加入一个逗号

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 等

关于这些类型请往后看。

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