Месяц Путь только вычисляет месяц, а не фактический диапазон дат

Прежде всего, извините за заголовок.

Я пытаюсь добиться чего-то подобного: https://bl.ocks.org/mbostock/4063318 Я очень близко, и единственное, чего я не могу получить, - это путь вокруг месяцев.

Я использую открытый исходный код с этой страницы, а также мои варианты этого https://github.com/Teamie/calendar-heatmap/blob/master/src/calendar-heatmap.js

В настоящее время я довольно близко, но это то, что он приходит:

Диапазон дат на этом рисунке - 15 августа 2016 года - 15 августа 2017 года, но начинается путь, как если бы это было 1 августа 2015 года - 19 августа 2017 года. Так что происходит, что путь, окружающий месяц, фактически будет окружать последнюю половину одного месяца и первой половины другого. Где-то он получает неправильные данные, я просто не могу понять это.

Вот мой код для самого трейла:

    /*
     *
     * 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);

Любая помощь очень ценится.

РЕДАКТИРОВАТЬ: Не заметил странности, происходящей вокруг Мар/Апр, но также понятия не имеет, что там происходит.

Ответ 1