javascript - Month Path 只计算月份，不计算实际日期范围

Question

首先，对标题感到抱歉。

我正在尝试实现类似的目标: https://bl.ocks.org/mbostock/4063318我真的很接近，我唯一无法得到的是几个月的路径。

我正在使用该页面的开源代码以及我对此的变体 https://github.com/Teamie/calendar-heatmap/blob/master/src/calendar-heatmap.js

目前我非常接近，但这就是结果:

这张照片上的日期范围是 2016 年 8 月 15 日 - 2017 年 8 月 15 日，但它开始的路径好像是 2015 年 8 月 1 日 - 2017 年 8 月 19 日。所以发生的是一个月周围的路径实际上将围绕后半个月一个月和另一个的上半年。它在某处获取了错误的数据，我无法弄清楚。

这是我的路线本身的代码:

    /*
     *
     * REFERENCE
     *
     * M = moveto
     * H = horizontal lineto
     * V = vertical lineto
     * Z = closepath
     *
     */
    // https://bl.ocks.org/mbostock/4063318 MAGIC
    function monthPath(t0) {
        //What the hell is a t0 anyways?
        console.log(counter + " " + t0);

        let cellSize = SQUARE_LENGTH + SQUARE_PADDING;

        let t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
            d0 = t0.getDay(), w0 = d3.timeWeek.count(d3.timeYear(t0), t0),
            d1 = t1.getDay(), w1 = d3.timeWeek.count(d3.timeYear(t1), t1);

        let voodoo = 'M' + (w0 + 1) * cellSize + ',' + d0 * cellSize +
            'H' + w0 * cellSize + 'V' + 7 * cellSize +
            'H' + w1 * cellSize + 'V' + (d1 + 1) * cellSize +
            'H' + (w1 + 1) * cellSize + 'V' + 0 +
            'H' + (w0 + 1) * cellSize + 'Z';
        console.log(voodoo);
        return voodoo;
        /*
         * TRANSLATION OF VOODOO
         *
         * voodoo = startat boundaries of w0, d0.
         * move horizontally over one cell
         * move vertically 7 cells
         * move horizontally to the boundaries of w1 + one cell
         * move vertically to the boundaries of (d1 + one) + one cell
         * move horizontally to the boundaries of (w1 + one) + one cell
         * move vertically 0 pixels??
         * hove horizontally to (w0 +1) + one cell
         * close the path
         */
    }
}

以及我调用函数的代码:

        // month border
        let first = dateRange[0];
        let last = dateRange[dateRange.length - 1];
        let tempRange = [];
        tempRange.push(first);
        for(let i = 1; i < 13; i++) {
            tempRange.push(new Date(first.getFullYear(), first.getMonth() + i, 1));
        }
        tempRange.push(dateRange[dateRange.length - 1]);
        console.log(tempRange);
        svg.append('g')
            .attr('transform', 'translate(-1,' + (MONTH_LABEL_PADDING - 1) + ')')
            .selectAll('.monthpath')
            .data(d3.timeMonths(new Date(first.getFullYear(), first.getMonth(), first.getDay()), new Date(last.getFullYear(), last.getMonth(), last.getDay())))
            //.data(tempRange)
            //NOTE: I have tried both .data() attempts with the same result for each
            .enter().append('path')
            .attr('class', 'monthpath')
            .attr('d', monthPath);

非常感谢任何帮助。

编辑:没有注意到 3 月/4 月左右发生的怪异情况，但也不知道那里发生了什么。

Answer 1

Mike Bostock 代码在每一行中绘制从一月到十二月的月份路径，而不是您想要的从八月到七月的路径。

您在 4 月看到的“怪异”是两个 8 月的重叠。

在 monthPath 函数中，路径的起点部分由一年中的第几天决定 (d0 = t0.getDay())。您需要对此进行抵消，以说明将月份从 1 月至 12 月转移到 8 月至 7 月