将时间刻度从几天更改为几周,如何更新和汇总数据值?

时间:2013-05-06 21:13:56

标签: javascript date d3.js

我试图让d3.js中的条形图更新它的值,当用户将时间刻度从几天,几周或几个月更改为时。 (即,当时间尺度变为几周时,我希望在给定的一周中每天的所有数据值相加在一起)。例如,以下是x轴时间刻度的默认图表:

x轴(天数) enter image description here

当用户将时间刻度更改为周并且x轴更新时,数据值将按天分组,如下所示:

x轴按周计算,但数据值仍按日分组: x-Axis scale in weeks, but data values remain grouped by day

我想要的是x轴上每年的每周数字只有一个条形图,显示用户为该周所有7天提供的所有数据值的总和。我如何实现这一目标?

这是必须在服务器端完成,还是可以在客户端使用javascript,或者是否有一些简单的d3.js方式我可以忽略?

这就是我的数据:

[{"date":"2013-04-20","load_volume":400},{"date":"2013-04-23","load_volume":400},{"date":"2013-04-24","load_volume":400},{"date":"2013-04-28","load_volume":1732},{"date":"2013-04-30","load_volume":400}]

我想要实现这一点我可以将日期值转换为weekNumberOfYear格式(例如,本周为17),将它们推入数组并删除所有重复项,然后对该数组中每天的数据值求和。我做了这个,数据看起来像这样:

[{"date":"15","load_volume":400},{"date":"16","load_volume":2532},{"date":"17","load_volume":400}]

但是,我不相信这是正确的方法,因为我总是在JS控制台中得到“错误:属性x =”NaN“”的值无效。我认为这是因为我使用x比例来定位我的图表上的rects:

.attr("x", function(d) { return padding + x(new Date(d.date)); })

...这将导致x(1969年12月31日19:00:00 GMT-0500(EST)),这会引发NaN错误。

我现在正在尝试将日期格式化为%Y-%m-%d格式并让它成为每周星期一的开始,但我想知道是否有更简单的解决方案,因为我已经在这一整天。

1 个答案:

答案 0 :(得分:2)

嗯,我想我已经明白了。我只需要将日期转换为毫秒时间并删除我在JSON字符串中的日期值周围的双引号(双引号给我一个NaN错误)。我用以下功能做到了这一点:

function getWeekDate(d) {
    d = new Date(d); // get current date
    var day = d.getDay();
    var diff = d.getDate() - day + (day == 0 ? -6 : 1); // Subtract day number of month from day number of week, and adjust when day is sunday
    var date = new Date(d.setDate(diff));
    return date.setHours(0);
}

改编自this SO question

不确定D3是否有更好的方法。如果我发现我会在这里发布。