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

这给了我一个显示-天：{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]} );
    }
}