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

但是我无法弄清楚如何使用嵌套数据来执行此操作，或者如何对其进行重组以使其看起来像示例中的数据一样。

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

0 个答案: