javascript - 将 D3 日历 View 示例调整为垂直，日期从左到右排序，然后从上到下排序？

Question

查看原始图库示例:http://bl.ocks.org/mbostock/4063318

该示例的工作方式是，日期按从上到下、从左到右的顺序排列。将鼠标悬停在它们上方即可明白我的意思。我想要的是更像是一个常规的垂直日历，其中月份垂直堆叠在一起，日期从左到右编号，然后从上到下编号。查看模型:

旋转整个月份堆栈并不算太糟糕，但我在 SVG 上绊倒了，因为月份没有相同的天数，所以绘制涉及的边缘情况。

有人愿意改变布局算法来做到这一点吗？

Answer 1

这就是我认为您所追求的:http://jsfiddle.net/henbox/d3y14zsq/1/ (仅使用最近3年的数据)

首先，我将每个年份(一个单独的 SVG 元素)放入 div 中，并使用了一些 CSS(在 .container 和 .block 中) >) 水平对齐。

实际上，切换每天的单元格以垂直显示年份很容易:在这段代码中切换 x 和 y:

.attr("x", function(d) { return week(d) * cellSize; })
.attr("y", function(d) { return day(d) * cellSize; })

还可以切换高度和宽度值

棘手的一点当然是月份大纲的路径，它是在 monthPath 中手动构建的。经过一番尝试和错误后，我得出了以下结论:

return "M" + d0 * cellSize + "," + (w0) * cellSize 
    + "H" + 7 * cellSize + "V" + (w1) * cellSize 
    + "H" + (d1 + 1) * cellSize + "V" + (w1 + 1) * cellSize
    + "H" + 0 + "V" + (w0 + 1) * cellSize + "H" 
    + d0 * cellSize + "Z";

基本上我交换了 H 和 V 行，但也不得不摆弄它一段时间才能让它工作

我修改了 g 元素上的转换，以便在每年的顶部为文本标签留出空间，而不是在左侧。我还通过添加一个新的 paddingSize 变量进行了一些整理，这样就减少了一些硬编码定位(尽管仍然有一些)

.append("g")
.attr("transform", "translate(" + paddingSize + ",15)");

最后我定位了年份的标签文本。