将 D3 日历视图示例调整为垂直，天从左到右排序，然后从上到下？

Question

查看原始画廊示例：http : //bl.ocks.org/mbostock/4063318

该示例的工作方式是从上到下，然后从左到右排列日期。将鼠标悬停在它们上方以了解我的意思。我想要的是更像常​​规垂直日历的东西，其中月份垂直堆叠在一起，天数从左到右，然后从上到下。见模拟：

旋转整个月的堆栈还不错，但是我在 SVG 上绘制了来自没有相同天数的月份所涉及的边缘情况。

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

Answer 1

这就是我认为你所追求的：http : //jsfiddle.net/henbox/d3y14zsq/1/（仅使用过去 3 年的数据）

首先，我将每一年（一个单独的 SVG 元素）放入 adiv并使用一些 CSS（in.container和.block）来水平对齐。

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

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

height以及width周围的切换和值

棘手的一点当然是月份大纲的路径，它是在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)");

最后我定位了这些年来的标签文本。