# d3格式化和本地化操作
# d3-format
npm install d3-format
[[fill]align][sign][symbol][0][width][,][.precision][~][type]
- 百分比设置
//(格式:0.n%=>n表示几位小数)
console.log(d3.format(".0%")(0.123))//12%
console.log(d3.format(".2%")(0.123))//12.30%
- 保留小数位
//(格式:0.nf=>n表示几位小数)
console.log(d3.format(".2f")(0.1 * 3))
- 加货币单位
console.log(d3.format("$.2f")(-3.5)) //−$3.50
console.log(d3.format("($.2%")(3.5)) //$350.00
- 填充空位 space-filled and signed
//+n
console.log(d3.format("+10")(42))
- 填充符号
console.log(d3.format("@^6")(42)) //@@42@@
- 带n个有效数字的SI前缀
console.log(d3.format(".4s")(426442)) //426.4k
console.log(d3.format(".2s")(426442)) //430k
- 保留n位数
console.log(d3.format(".6")(326981)) //326981
console.log(d3.format(".3")(326981)) //3.27e+5
- ,添加和四舍五入位数
console.log(d3.format(",.1r")(4293))//4,000
console.log(d3.format(",.2r")(4293))//4,300
# d3-time-format
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Time Scale</title>
<link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
<script src="http://d3js.org/d3.v6.min.js"></script>
</head>
<body>
<div id="time" class="clear">
<span>Linear Time Progression<br></span>
<span>Mapping [01/01/2016, 12/31/2016] to [0, 1200]<br></span>
</div>
<script type="text/javascript">
var start = new Date(2016, 0, 1), // <-A
end = new Date(2016, 11, 31),
range = [0, 1200],
time = d3.scaleTime().domain([start, end]) // <-B
.rangeRound(range), // <-C
max = 12,
data = [];
for (var i = 0; i < max; ++i){ // <-D
var date = new Date(start.getTime());
date.setMonth(start.getMonth() + i);
data.push(date);
}
function render(data, scale, selector) { // <-E
d3.select(selector).selectAll("div.fixed-cell")
.data(data)
.enter()
.append("div")
.classed("fixed-cell", true)
.style("margin-left", function(d){ // <-F
console.log(scale(d) + "px")
return scale(d) + "px";
})
.html(function (d) { // <-G
console.log(d)
var format = d3.timeFormat("%x"); // <-H
return format(d) + "<br>" + scale(d) + "px";
});
}
render(data, time, "#time");
</script>
</body>
</html>
var format = d3.timeFormat("%x");
- %a 星期缩写 Fri
- %A 星期全称 Monday
- %b 月缩写 Jan
- %B 月全称 February
- %d 在本月的天数，不足两位自动补0: 01
- %e 在本月的天数，不足两位自动补空格 " 1"
- %H 小时[00,23]
- %I 小时[01,12]
- %j 一年中的第[001,366]天
- %m 月份[01,12]
- %M 分钟[00,59]
- %L 毫秒数[000,999]
- %p AM/PM
- %Q - UNIX 毫秒,即时间戳
- %S 秒[00,60]
- %s - UNIX 秒.
- %x 日期部分 等于%m/%d/%Y 1/1/2016
- %X 时间部分 等于%M/%H/%S %p 12:00:00 AM
- %y 两位数年份[00,99]
- %Y 四位数年份 如2016
var format = d3.timeFormat("%Y+%y-%j")
//2016+16-001
# d3-dsv
这个模块提供了一个针对分隔符文件/字符串的解析和格式化工具
npm install d3-dsv
CSV 与 TSV 的转换以及格式化是内置的，比如解析：
d3.csvParse("foo,bar\n1,2"); // [{foo: "1", bar: "2"}, columns: ["foo", "bar"]]
d3.tsvParse("foo\tbar\n1\t2"); // [{foo: "1", bar: "2"}, columns: ["foo", "bar"]]
格式化
d3.csvFormat([{foo: "1", bar: "2"}]); // "foo,bar\n1,2"
d3.tsvFormat([{foo: "1", bar: "2"}]); // "foo\tbar\n1\t2"
使用不同的分隔符，比如 "|" 来作为分割字符，则使用 d3.dsvFormat:
var psv = d3.dsvFormat("|");
console.log(psv.parse("foo|bar\n1|2")); // [{foo: "1", bar: "2"}, columns: ["foo", "bar"]]
# d3.locale(definition)
d3本地化配置
# d3时间设置 d3-time-format
# d3.timeParse 解析日期
var parseTime = d3.timeParse("%B %d, %Y");
console.log(parseTime("June 30, 2015"))
//Tue Jun 30 2015 00:00:00 GMT+0800 (中国标准时间)
# d3.timeFormat 格式化日期
var formatTime = d3.timeFormat("%B %d, %Y");
console.log(formatTime(new Date))
//February 08, 2021
%a - 简写的周?.*
%A - 周?的全称.*
%b - 简写的月.*
%B - 月的全称.*
%c - 区域日期和时间, 比如 %x, %X.*
%d - 使用 0 填补位数的天 [01,31].
%e - 使用空格填补位数的天 [ 1,31]; 等价于 %_d.
%f - 微秒 [000000, 999999].
%H - 24 小时制小时 [00,23].
%I - 12 小时制小时 [01,12].
%j - 一年中的第几天 [001,366].
%m - 月份 [01,12].
%M - 分钟 [00,59].
%L - 毫秒 [000, 999].
%p - AM 或 PM.*
%Q - UNIX 毫秒.
%s - UNIX 秒.
%S - 秒 [00,61].
%u - 一周中的第几天 [1, 7] (ISO 8601)
%U - 一年中的第几周 [00,53].
%V - 一年中的第几周 [01,53] (ISO 8601)
%w - 从周日开始算起，是所在周的第几天 [0,6].
%W - 一年中的第几周，从周一开始算新的一周 [00,53].
%x - 区域日期格式, 比如 %m/%d/%Y.不同地方格式不一样*
%X - 区域时间格式, 比如 %H:%M:%S.不同地方格式不一样*
%y - 所在世纪的第几年( 16 ) [00,99].
%Y - 年的全写( 2016 ).
%Z - 返回当前时区，比如 -0700, -07:00, -07, or Z.
%% - 百分比 (%).