如何在 d3.js 中制作小时和分钟的自定义轴格式化程序？

Question

我有一个要使用 d3.js 绘制图形的数据集。 x 轴代表时间（以分钟为单位）。我想以hh:mm 格式显示此轴，但我找不到在 d3 中干净利落地执行此操作的方法。

我的坐标轴代码如下：

svg.append('g')
   .attr('class', 'x axis')
   .attr('transform', 'translate(0,' + height + ')')
   .call(d3.svg.axis()
     .scale(x)
     .orient('bottom'));

它会在几分钟内生成类似于[100, 115, 130, 140] 等的标签。

我目前的解决方案是在生成 text 元素后选择它们，并用函数覆盖它们：

   svg.selectAll('.x.axis text')
   .text(function(d) { 
       d = d.toFixed();
       var hours = Math.floor(d / 60);
       var minutes = pad((d % 60), 2);
       return hours + ":" + minutes;
   });

这会输出轴刻度，如[1:40, 1:55, 2:10] 等。

但这感觉很笨拙并且避免使用d3.format。有没有更好的方法来制作这些标签？

Answer 1

如果您有绝对时间，您可能希望将 x 数据转换为 JavaScript Date objects 而不是简单的数字，然后您想使用 d3.time.scale和d3.time.format。轴的“hh:mm”格式示例如下：

d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(d3.time.format("%H:%M"));

实际上，您可能根本不需要指定刻度格式；根据您的规模域和刻度数，default time scale format 可能足以满足您的需求。或者，如果您想要完全控制，您还可以指定刻度的刻度间隔。例如，对于每十五分钟的滴答声，您可能会说：

d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(d3.time.minutes, 15)
    .tickFormat(d3.time.format("%H:%M"));

如果您有相对时间、即持续时间（因此有代表分钟而不是绝对日期的数字），您可以通过选择任意纪元将它们格式化为日期并即时转换。这样您就可以将数据本身保留为数字。例如：

var formatTime = d3.time.format("%H:%M"),
    formatMinutes = function(d) { return formatTime(new Date(2012, 0, 1, 0, d)); };

由于只会显示分钟和小时，因此选择哪个纪元并不重要。下面是一个使用这种技术来格式化持续时间分布的示例：

• http://bl.ocks.org/3048166