创建过去365天的日历网格

Create a calendar grid of the last 365 days

本文关键字：日历 网格 365天 过去 创建      更新时间：2024-06-16

我现在正在学习d3.js，我想创建一个类似于github公共贡献图的日历视图。

我使用这个d3.js日历视图作为我的起点。

我遇到的问题是试图创建一个过去365天的网格。我创造了一把小提琴：http://jsfiddle.net/fcR4Q/1/我被困的地方。目前，它只创建了一年365个盒子。

我想我需要更改以下行：

var svg = d3.select(".sales").selectAll("svg")
    .data(d3.range(2012, 2013))
...
return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1));

我尝试过各种方法，但都没有奏效。有人能给我指个正确的方向吗。

首先，在为上一个年份设置年份时，您正在修改原始年份（today）。你的代码应该是这样的：

var today = new Date(),
lastyear = new Date();
lastyear.setFullYear(lastyear.getFullYear() - 1);

实际上，您不再需要嵌套选择，因为您只有一年的时间。因此，对于SVG，您只需要执行

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "RdYlGn")
.append("g")
.attr("transform",
      "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")");

最后，要计算单元格的位置，不再重要的是日期/周（因为你想要连续的单元格），而是索引：

.attr("x", function(d, i) { return Math.floor(i / 7) * cellSize; })
.attr("y", function(d, i) { return i % 7 * cellSize; })

在这里完成jsfiddle。

相关文章：