如何制作一个自定义轴格式化工具，分钟在d3.js？ [英] How do I make a custom axis formatter for hours & minutes in d3.js?
问题描述
我有一个数据集我用d3.js图。 x轴表示时间（以分钟为单位）。我想以 hh：mm 格式显示此轴，我无法在d3中找到一个干净的方法。
I've got a dataset I'm graphing with d3.js. The x axis represents time (in minutes). I'd like to display this axis in an hh:mm format, and I can't find a way to do this cleanly within 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] 等。
Which generates labels in minutes that looks like [100, 115, 130, 140], etc.
我目前的解决方案是选择 text 它们已生成，并使用以下函数覆盖它们：
My current solution is to select the text elements after they've been generated, and override them with a function:
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] 等。
This outputs axis ticks like [1:40, 1:55, 2:10], etc.
但是这感觉janky，避免使用 d3.format 。
But this feels janky and avoids the use of d3.format. Is there a better way to make these labels?
推荐答案
如果你有绝对时间，你可能想将您的 x 数据转换为JavaScript 日期对象而不是简单的数字，然后您要使用 d3.time.scale 和 d3.time.format 。轴的hh：mm格式示例如下：
If you have absolute time, you probably want to convert your x data to JavaScript Date objects rather than simple numbers, and then you want to use d3.time.scale and d3.time.format. An example of "hh:mm" format for an axis would be:
d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%H:%M"));
实际上，你可能不需要指定一个tick格式;根据您的标尺的域和点击数，默认时间刻度格式可能足以满足您的需求。或者，如果您想要完全控制，您也可以指定刻度的刻度间隔。例如，对于每十五分钟一次，您可以说：
And actually, you may not need to specify a tick format at all; depending on the domain of your scale and the number of ticks, the default time scale format might be sufficient for your needs. Alternatively, if you want complete control, you can also specify the tick intervals to the scale. For example, for ticks every fifteen minutes, you might say:
d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(d3.time.minutes, 15)
.tickFormat(d3.time.format("%H:%M"));
如果您有相对时间，持续时间（因此具有代表分钟而不是绝对日期的数字），您可以通过选择任意时代并即时转换将其格式化为日期。这样，您可以将数据本身作为数字。例如：
If you have relative time, i.e. durations, (and hence have numbers representing minutes rather than absolute dates), you can format these as dates by picking an arbitrary epoch and converting on-the-fly. That way you can leave the data itself as numbers. For example:
var formatTime = d3.time.format("%H:%M"),
formatMinutes = function(d) { return formatTime(new Date(2012, 0, 1, 0, d)); };
由于只显示分钟和小时，因此您选择的时期无关紧要。下面是一个使用此技术格式化持续时间分布的示例：
Since only the minutes and hours will be displayed, it doesn't matter what epoch you pick. Here’s an example using this technique to format a distribution of durations:
- http://bl.ocks.org/3048166
这篇关于如何制作一个自定义轴格式化工具，分钟在d3.js？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
