Javascript 创建最近365天的日历网格

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

我以此为出发点

我遇到的问题是试图为过去365天创建一个网格。我创造了一把小提琴：我被卡住的地方。目前，它只是为一年的范围创造了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));

---

我试过各种各样的方法，但都不管用。有人能给我指出正确的方向吗。

首先，在为上一年设置年份时，您正在修改原始年份（

今天

）。您的代码应该如下所示：

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

---

完成JSFIDLE。

谢谢，太好了。我希望他们在日期顺序，并保持他们在一周的一天定位。我已经尝试过了（见更新），但是现在x轴偏移了3421233px！我正试图解决如何计算本节中的偏移量

.attr（“x”，函数（d）{return（（年（d）+周（d））*cellSize）；}

这稍微有点棘手，因为您必须处理周偏移量之类的问题--