如何使用Cal-Heatmap创建连续的类Github日历？

Question

我刚刚开始使用cal-heatmap创建一个类似Github的日历(例如,一年中每一天的热图以块为单位).理想情况下,我希望它看起来像这样:

不幸的是,通过我的设置,我不断得到更多的东西:

当前问题是几个月之间的空白,例如,中间存在白色块.我认为这个问题将是与the domain,the subdomain,and,and the rangeand rowLimit; 但我不能100%确定应该是什么组合.我试过几个 - 这是我目前的设置:

    (function($) {
        $(document).ready(function() {

            var cal = new CalHeatMap();
            cal.init({
                start: new Date(2013, 0), // January 1, 2013
                maxDate: new Date(),
                range: 12,
                rowLimit: 7,
                domain: "month",
                subDomain: "day",
                data: "/api/users/1/annotations/",
                cellSize: 12
            });

        });
    })(jQuery);

我很确定这是可能的; 我想问题是,是否可以使用月/年域,以及我需要使用哪些设置来实现它.

编辑2014年1月27日:根据@kamisama的说法,我已经尽可能接近了.这是我目前的设置:

    cal.init({
        start: oneYearAgo(),
        maxDate: new Date(),
        range: 1,
        rowLimit: 7,
        domain: "year",
        subDomain: "day",
        data: "/api/users/1/annotations/",
        cellSize: 10.5
    });

哪个可以得到这样的东西:

没有月份标签,也没有星期几的标签.

Answer 1

我发现在 cal-heatmap 中近似 Github 提交图的最佳解决方案是使用 Week 域而不是 Month。

由于这通常会显示每周的标签，请将domainLabelFormat设置为空字符串（不显示标签）或将其设置为仅显示（例如）每个月第一周的标签的函数。

var currentMonth = settings.start;
settings.domainLabelFormat = function (date) { //x-axis labels
            var md = moment(date);
            //only show the label for the first domain of the month
            if (md.month() == currentMonth)
                return "";

            //reset the current month
            currentMonth = md.month();
            //return the label
            return md.format("MMM");
        };

铌。如果标签被修剪可以通过父容器，集合CSSoverflow: visible上.graph-domain并覆盖其宽度为更大的值。

对于 y 轴 Mon/Wed/Fri 标签，只需将它们自己添加到图表的左侧或右侧，并以适当的间距与单元格的大小对齐。

#cal-heatmap-yaxislabels {
    float: left;
}
#cal-heatmap-yaxislabels > * {
    margin-top: 16px;
    display: block;
}

<div id="cal-heatmap-yaxislabels">
     <div class="graph-label">Mon</div>
     <div class="graph-label">Wed</div>
     <div class="graph-label">Fri</div>
</div>

我不知道这是否是解决问题的最优雅的方法，但我希望它可以帮助某人。

Answer 2

如果您可以在没有cal-heatmap 的情况下工作而直接使用 D3，这里有一个很好的自定义热图日历示例，来自 D3 的创建者。

它更像是一个手动解决方案，但另一方面，它让您可以自由地使其看起来完全符合您的意愿。