javascript - D3 天/小时热图 - 嵌套数据问题

Question

我正在尝试创建日/小时热图，如下例所示:http://bl.ocks.org/tjdecke/5558084 。

我正在尝试创建一个与示例中的数据集类似的数据集，如下所示:

day hour    value
1   1   16 
1   2   20
1   3   0
...

我首先使用 d3.histogram 按小时对数据进行分类，然后使用 d3.nest 按星期几和小时进行嵌套:

var nested_data = d3.nest()
                        .key(function(d) { return formatTimeDay(new Date(d.x0)); })
                        .key(function(d) { return  formatTimeHour(new Date(d.x0)); })
                        .rollup(function(v) { return d3.mean(v, function(d) { return d.length; }); })
                        .object(bins);

这给了我一个数据集，显示 - day: {hour: value, hour2: ...}:

1: {"00": 0.4, "01": 1.4, ..
2: {"00": 0.2, "01": 4.3..

现在我需要绘制矩形，在示例中是这样完成的:

  var cards = svg.selectAll(".hour")
          .data(data, function(d) {return d.day+':'+d.hour;});

      cards.enter().append("rect")
          .attr("x", function(d) { return (d.hour - 1) * gridSize; })
          .attr("y", function(d) { return (d.day - 1) * gridSize; })
          .attr("rx", 4)
          .attr("ry", 4)
          .attr("class", "hour bordered")
          .attr("width", gridSize)
          .attr("height", gridSize)
          .style("fill", colors[0]);

但我不知道如何使用嵌套数据来执行此操作，或者如何重组它以使其看起来像示例中的数据。

Answer 1

var flatList = [];

for (var day in nested_data) {
    var day_data = nested_data[day];
    for (var hour in day_data) {
        flatList.push( { day: +day, hour: +hour, value: day_data[hour]} );
    }
}