如何在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对象而不是简单数字,然后你想使用d3.time.scale和d3.time.format.轴的"hh:mm"格式的示例是:

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

实际上,您可能根本不需要指定刻度格式; 根据您的比例域和刻度数,默认时间刻度格式可能足以满足您的需求.或者,如果要完全控制,还可以指定刻度的刻度间隔.例如,对于每十五分钟的刻度,您可能会说:

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