javascript - 在 d3 轴上显示持续时间

Question

我目前正在使用 d3.time.scale.utc() 创建一个 d3 轴。我的轴输入是一系列以分钟为单位的时间偏移量(带十进制值)。例如:

var minuteOffsets = [0.03, 1.65, 3.22, ..., 89.91, 90.01];

我想在轴上以 mm:ss 格式显示这些时间偏移。轴标签可以采用标准间隔，如下所示:

  +------+------+-- ... --+------+------+-- ... --+------+
00:00  00:30  01:00     59:30  60:00  60:30     90:00  90:30

请特别注意，分钟值应显示值 >60。秒值的正常范围为 0-59。

当我尝试使用 .tickFormat(d3.time.format('%M:%S')) 时，它会将分钟值换回到 00:00在 45:00 标签之后。我还查看了 moment.js 中的 duration，但我不知道如何将它准确地合并到我的代码中。

Answer 1

根据 Lars Kotthoff 的评论，我将比例尺改为线性比例尺，而不是时间比例尺。然后我添加了一个自定义的 tickFormat 函数来进行必要的格式化。

我使用 MomentJS 首先从分钟值创建一个 duration，然后使用库 moment-duration-format生成 mm:ss 格式的刻度标签。

var axis = d3.svg.axis().tickFormat(function (d) {
    return moment.duration(d, 'minutes')
                 .format('mm:ss', { trim: false });
});

这有助于避免显式编写代码来提取分和秒的组成部分，然后将它们格式化为字符串。