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

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

并且还在

周围切换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 行，但也不得不 fiddle 一段时间才能让它工作

我修改了 g 元素上的转换，使 space 位于文本标签每年的顶部，而不是左侧。我还通过添加一个新的 paddingSize 变量来整理一下，这样硬编码定位就少了一点（尽管仍然有一些）

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

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

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

Tweak D3 calendar view example to be vertical with days be ordered left to right, then top to bottom?

javascript

svg

d3.js