Javascript 在d3轴上显示持续时间

我目前正在使用

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

，但我不知道如何准确地将其纳入我的代码中。

根据Lars Kotthoff的评论，我将刻度改为线性刻度，而不是时间刻度。然后我添加了一个自定义的

tickFormat

函数来进行必要的格式化

我使用MomentJS首先从分钟值创建

持续时间

，然后使用库以

mm:ss

格式生成刻度标签

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

---

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

听起来您不想使用时间刻度，而是使用线性刻度。您可以按原样将值传递到比例，并在格式化功能中将其转换为

mm:ss

格式。