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

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