基于缩放级别的 D3 x 轴格式答案

【问题标题】：D3 x-axis format based on zoom level基于缩放级别的 D3 x 轴格式
【发布时间】：2021-02-04 15:33:19
【问题描述】：

TLDR：我想以不同的缩放级别更改我的格式。现在，我只是想复制默认格式。

默认情况下（我假设我正在使用现有代码），我的时间轴的 x 轴从几年开始，在放大时变得更加细化，直到达到几小时。当我应用自定义多尺度格式时，我会丢失除单一格式之外的所有内容

我看过几个多刻度刻度格式的示例，并认为这是可行的方法。但是，我的时间总是有年、月、日和小时值，所以我见过/尝试过的多尺度刻度格式总是显示小时值。默认的tickFormat似乎没有这个问题。

这是我一直在测试的 tickFormat 函数，试图在进行调整之前模仿默认值：

const multiFormat = (date: Date) => {
  const 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')

  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)
}

视觉示例：

这是时间轴的一部分，默认 x 轴（缩小/缩小）

这是我的 tickFormat（缩小/缩小）

【问题讨论】：

标签： javascript d3.js format zooming

【解决方案1】：

因此，难题中缺少的部分似乎是 d3.utc[time_frame] 函数（例如 d3.utcSecond）。这似乎解决了问题，并为我们提供了默认的 tickFormat。

这就是我最终得到的结果（为了清晰起见，可能需要进行一些重构）：

function multiFormat(date: Date) {
  return (d3.utcSecond(date) < date
    ? d3.timeFormat('.%L')
    : d3.utcMinute(date) < date
    ? d3.timeFormat(':%S')
    : d3.utcHour(date) < date
    ? d3.timeFormat('%H:%M')
    : d3.utcDay(date) < date
    ? d3.timeFormat('%H %p')
    : d3.utcMonth(date) < date
    ? d3.utcWeek(date) < date
      ? d3.timeFormat('%a %d')
      : d3.timeFormat('%b %d')
    : d3.utcYear(date) < date
    ? d3.timeFormat('%B')
    : d3.timeFormat('%Y'))(date)
}

【讨论】：