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代码描绘了几个月的时间。每行从1月到12月的路径，而不是从8月到7月，如你所愿。

＆＃34;古怪＆＃34;你在4月份看到的是8月份的两个月重叠。

在monthPath函数中，路径的起点部分取决于一年中的日期编号（d0 = t0.getDay()）。您需要抵消这一点，以便将月份从1月至12月转移到8月至7月

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

1 个答案: