创建过去 365 天的日历网格答案

【问题标题】：Create a calendar grid of the last 365 days创建过去 365 天的日历网格
【发布时间】：2013-12-11 13:51:30
【问题描述】：

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

我使用这个d3.js calendar view 作为我的起点。

我遇到的问题是尝试为过去 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));

我尝试了各种方法，但都没有奏效。有人能指出我正确的方向吗？

【问题讨论】：

标签： javascript date d3.js calendar

【解决方案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 here.

【讨论】：

谢谢，太好了。我希望它们按日期顺序排列，并按星期几定位。我已经尝试过了（请参阅更新的fiddle），但现在 x 轴偏移了 3421233px！我正在尝试弄清楚如何计算本节中的偏移量.attr("x", function(d) { return ((year(d)+week(d)) * cellSize); })
这有点棘手，因为您必须处理周偏移等问题 -- jsfiddle.net/fcR4Q/5