d3.js - d3 中的自定义多尺度时间格式

Question

d3.time.scale有一个整洁的时间格式化程序，它使用多尺度时间格式。是否有 API 或其他方式（还）来指定多尺度时间格式？

我知道可以创建一个新的d3.time.format，但这不会是多尺度的。

谢谢。

Answer 1

多尺度时间格式不作为d3.time.scale的tickFormat方法返回的标准 API 之外的公共 API 公开。

也就是说，实现本身相当简单，因此您无需大量工作即可创建自己的多尺度时间格式。多尺度时间格式只是时间格式的有序数组，每个格式都有一个关联的测试函数。返回 true 的第一个测试函数确定使用哪种时间格式。

d3.time.scale 使用的时间格式有以下格式（取自time/scale.js），以相反的顺序指定：

  [".%L", function(d) { return d.getMilliseconds(); }],
  [":%S", function(d) { return d.getSeconds(); }],
  ["%I:%M", function(d) { return d.getMinutes(); }],
  ["%I %p", function(d) { return d.getHours(); }],
  ["%a %d", function(d) { return d.getDay() && d.getDate() != 1; }],
  ["%b %d", function(d) { return d.getDate() != 1; }],
  ["%B", function(d) { return d.getMonth(); }],
  ["%Y", d3_true]

因此，例如，如果时间具有非零毫秒字段，则使用“.%L”格式；否则，如果它有一个非零秒字段，则使用“:%S”；等等。

Answer 2

在 d3 版本 4 中，d3.time.format已更改。这是创建条件时间格式化程序的新版本：

https://github.com/d3/d3-time-format#d3-time-format

var formatMillisecond = d3.timeFormat(".%L"),
    formatSecond = d3.timeFormat(":%S"),
    formatMinute = d3.timeFormat("%I:%M"),
    formatHour = d3.timeFormat("%I %p"),
    formatDay = d3.timeFormat("%a %d"),
    formatWeek = d3.timeFormat("%b %d"),
    formatMonth = d3.timeFormat("%B"),
    formatYear = d3.timeFormat("%Y");

function multiFormat(date) {
  return (d3.timeSecond(date) < date ? formatMillisecond
      : d3.timeMinute(date) < date ? formatSecond
      : d3.timeHour(date) < date ? formatMinute
      : d3.timeDay(date) < date ? formatHour
      : d3.timeMonth(date) < date ? (d3.timeWeek(date) < date ? formatDay : formatWeek)
      : d3.timeYear(date) < date ? formatMonth
      : formatYear)(date);
}