Javascript d3数据的自定义分组

我有以下json：

[{"Time":"2017-02-07 16:14:06"},
{"Time":"2017-02-07 16:58:49"},
{"Time":"2017-02-07 17:07:11"},
{"Time":"2017-02-07 18:13:19"},
{"Time":"2017-02-07 13:56:06"},
{"Time":"2017-02-07 19:07:57"},
{"Time":"2017-02-07 12:08:58"},
{"Time":"2017-02-07 01:41:00"},
{"Time":"2017-02-07 11:56:49"},
{"Time":"2017-02-07 02:45:29"},
{"Time":"2017-02-07 11:40:07"},
{"Time":"2017-02-07 04:15:45"},
]

我在d3.json函数中解析这些日期，以获得24小时值，如下所示：

var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;

d3.json("/wp-content/themes/jordan/js/data.json", function(d){

    d.forEach(function(d){
        d.Time = parseDate(d.Time).getHours();
        console.log(d.Time);
    });
});

---

这是在24小时内以整数形式返回我的所有值。一切都很好。如何使用

d3.nest（）

将所有小时值分组为4小时增量？例如，0-4，4-8，8-12，12-16，16-20，20-24。如果你这样定义句点数组

var periods = ['0 - 4', '4 - 8', '8 - 12', '12 - 16', '16 - 20', '20 - 24']

这样你就可以很容易地定义一个小时属于哪个时段

period[Math.floor(d/4)]

完整代码

var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse,
    periods = ['0 - 4', '4 - 8', '8 - 12', '12 - 16', '16 - 20', '20 - 24'];

d3.json("/wp-content/themes/jordan/js/data.json", function(data) {
    data = data.map(function(d) {
        return parseDate(d.Time).getHours();
    });

    data = d3.nest()
             .key(function(d) {
                 return periods[Math.floor(d/4)];
             })
             .entries(data);
});

---

如果您这样定义句点数组

var periods = ['0 - 4', '4 - 8', '8 - 12', '12 - 16', '16 - 20', '20 - 24']

这样你就可以很容易地定义一个小时属于哪个时段

period[Math.floor(d/4)]

完整代码

var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse,
    periods = ['0 - 4', '4 - 8', '8 - 12', '12 - 16', '16 - 20', '20 - 24'];

d3.json("/wp-content/themes/jordan/js/data.json", function(data) {
    data = data.map(function(d) {
        return parseDate(d.Time).getHours();
    });

    data = d3.nest()
             .key(function(d) {
                 return periods[Math.floor(d/4)];
             })
             .entries(data);
});

---

非常感谢…关于如何使用这些范围创建条形图的任何见解。每个范围都将是一个条形图，其高度基于每个范围中的条目数。不，在没有查看文档的情况下，我没有与d3进行过太多的合作来提出解决方案，但我相信您可以自己做，因为这是一件简单的事情：）非常感谢……关于如何使用这些范围创建条形图的任何见解。每个范围都将是一个条形图，高度取决于每个范围内的条目数。不，在没有查看文档的情况下，d3没有太多的工作来提出解决方案，但我相信你可以自己做，因为这是一件简单的事情：）