我目前正在学习 d3.js,我想创建一个类似于 github 公共(public)贡献图表的日历 View 。
我正在使用这个 d3.js calendar view作为我的起点。
我遇到的问题是尝试为过去 365 天创建一个网格。我创建了一个 fiddle :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));
我试过各种方法,但都没有用。有人能指出我正确的方向吗。
最佳答案
首先,您在为前一年设置年份时修改了原始年份(今天
)。您的代码应如下所示:
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 .
关于javascript - 创建过去 365 天的日历网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20520944/