Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/478.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 将时间尺度从几天更改为几周,如何更新和求和数据值?_Javascript_Date_D3.js - Fatal编程技术网

Javascript 将时间尺度从几天更改为几周,如何更新和求和数据值?

Javascript 将时间尺度从几天更改为几周,如何更新和求和数据值?,javascript,date,d3.js,Javascript,Date,D3.js,我试图让d3.js中的条形图在用户将时间刻度从天更改为周或月时更新其值。(即,当时间刻度更改为周时,我希望将给定周内每天的所有数据值相加)。例如,以下是x轴时间刻度(以天为单位)的默认图形: x轴(以天为单位) 当用户将时间刻度更改为周且x轴更新时,数据值仍按天分组,如下所示: x轴标度以周为单位,但数据值仍按天分组: 我想要的是,在x轴上,一年中的每个星期数只有一个条形图,显示用户为该周所有7天提供的所有数据值的总和。我如何做到这一点? 这是否必须在服务器端完成,或者可以使用javascr

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

x轴(以天为单位)

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

x轴标度以周为单位,但数据值仍按天分组:

我想要的是,在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控制台中总是得到一个“Error:Invalid value for attribute x=“NaN”。我认为这是因为我使用x比例在图形上定位矩形:

.attr("x", function(d) { return padding + x(new Date(d.date)); })
。。。这将导致x(Wed Dec 31 1969 19:00:00 GMT-0500(EST)),它抛出一个NaN错误


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

好吧,我想我已经解决了。我只需将日期转换为毫秒时间,并删除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);
}
这是改编自

不确定D3是否有更好的方法。如果我发现了,我会把它贴在这里