2

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

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 控制台中收到“错误：属性 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 格式，并将其设置为每周的星期一开始，但我想知道是否有更简单的解决方案，因为我整天都在这样做。

4

1 回答 1

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);
}

这是改编自这个 SO question。

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

于 2013-05-06T21:57:02.273 回答