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函数指定格式，但您还必须将小时数转换为有效的日期时间对象。< / p>

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日午夜，但你也指定格式只包括小时和分钟，所以这不应该是一个问题。