将D3日历视图示例调整为垂直，天数从左到右，然后从上到下? [英] Tweak D3 calendar view example to be vertical with days be ordered left to right, then top to bottom?

问题描述

请参阅原始图片库示例: http://bl.ocks.org/mbostock/4063318

See original gallery example: http://bl.ocks.org/mbostock/4063318

该示例的工作方式是，按照从上到下，然后从左到右的顺序排列日期.将鼠标悬停在他们身上，明白我的意思.我想要的更像是一个常规的垂直日历，其中月份垂直堆叠在一起，并且日期从左到右，然后从上到下进行编号.参见模拟:

The way the example works, the days are ordered top to bottom, then left to right. Hover over them to see what I mean. What I want is something more like a regular vertical calendar, where the months are stacked vertically on top of each other and the days are numbered left to right, then top to bottom. See mock up:

旋转整个月的堆栈还不错，但是我想在SVG上绘制那些没有全部都具有相同天数的月份所涉及的边缘情况.

Rotating the entire month stack is not too bad but I'm tripping up on SVG drawing the edge cases involved from months not having all having the same number of days.

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

Anybody willing to to alter the layout algorithm to do it this way?

推荐答案

以下是我认为的内容:

Here's what I think you're after: http://jsfiddle.net/henbox/d3y14zsq/1/ (only uses the last 3 years of data)

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

First I put each of the years (a separate SVG element) into a div and used some CSS (in .container and .block) to align horizontally.

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

Actually switching the cells for each day to display years vertically is easy: switching the x and y in this bit of code:

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

并在附近切换height和width值

棘手的一点当然是月份概述的路径，它是在monthPath中手动建立的.经过反复试验，这是我想到的:

The tricky bit is certainly the path for the month outlines, which is built up manually in monthPath. After some trial-and-error, this is what I came up with:

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行，但是还不得不花一些时间来使它起作用.

Basically I swapped the H and V lines about, but also had to fiddle with it for a while to get it to work

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

I modified the transform on the g element to give space at the top of each year for the text label, rather than to the left. I also tidied up a bit by adding a new paddingSize variable so there's a bit less hard-coded positioning (although there is still some)

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

最后，我将标签文本放置了多年.

Finally I positioned the label text for the years.

这篇关于将D3日历视图示例调整为垂直，天数从左到右，然后从上到下?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！