DC.js X 轴小时标签显示为千分之一

Question

使用 dc.js 构建一些图表。 localHour 属性包含 0 到 23 之间的数字。但是，在我的轴上使用它时，所有数字都报告为千分之一，而不是标准小时。 04 PM 也出现在原点。

我该如何解决这个问题？

var hourDim = ndx.dimension(function(d){ return d.hour; });
var num = hourDim.group().reduceSum(dc.pluck('count'));

var mainChart = dc.lineChart("#main");

mainChart
    .width(500).height(200)
    .dimension(hourDim)
    .group(num)
    .x(d3.time.scale().domain([0,24]))
    .yAxisLabel("Count per Hour")  

Answer 1

这里实际发生的是您的“小时”测量值被解释为毫秒。如果您没有另外指定，毫秒是默认的 Javascript 时间单位。具体来说，您在 Javascript 零时间之后获得毫秒数，该时间是 1969 年 12 月 31 日或 1970 年 1 月 1 日的某个时间，具体取决于时区调整，并且显然从您所在时区的下午 4 点开始。其余的只是默认格式，试图让事情看起来不错。

除非您正在做其他需要将小时数视为时间戳的事情，否则将小时数保留为普通数字可能是最简单的方法，使用线性刻度而不是时间刻度。

如果您可以在轴标签上使用简单的旧“1”、“2”、“3”，这就是您所要做的。

如果您希望这些数字看起来像小时，您需要在图表轴上设置tickFormat 函数。

你可以做类似的事情

mainChart.x(d3.scale.linear().domain([0,24])
                         .tickFormat(function(h){return h + ":00";})
        );

但是，如果轴决定将刻度设置为小数值，则会出现问题 - 您会得到看起来像 1.5:00 而不是 1:30 的东西。您可以使用一些数学和数字格式化函数来解决这个问题，但此时您已经做了足够多的工作，值得使用正确的日期时间格式。

要获得正确的小时：分钟轴标签，您可以使用d3 time formatting 函数来指定格式，但您还必须将小时数转换为有效的日期时间对象。

var msPerHour = 1000*60*60;

var timeFormat = d3.time.format.utc("%H:%M");

mainChart.x(d3.scale.linear().domain([0,24])
                         .tickFormat(function(h){
                              return timeFormat(new Date(msPerHour*h) );
                         })
        );

请注意，我已将时间格式函数指定为使用 UTC 时间而不是本地时间，因此它将零视为午夜。它仍然认为现在是 1970 年 1 月 1 日午夜，但您还指定格式仅包含小时和分钟，因此这不应该成为问题。