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