月路径仅计算月份,而不是实际日期范围

Question

首先,抱歉标题.

我正在努力实现与此类似的东西:https: //bl.ocks.org/mbostock/4063318 我真的很接近,我唯一不能得到的就是这几个月的路径.

我正在使用该页面的开源代码以及我对此https的修改 http://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 代码在每一行中绘制从一月到十二月的月份路径，而不是如您所愿的从八月到七月。

你在四月看到的“奇怪”是两个八月重叠的。

在 MonthPath 函数中，路径的起点部分由年份 ( d0 = t0.getDay()) 内的天数决定。您需要抵消这一点，以将月份从 1 月至 12 月转移到 8 月至 7 月