0

我正在复制此网页的日历热图。我的代码可以在这个fiddle找到。我主要对代码的以下部分感兴趣：

var svg = d3.select("body").selectAll("svg") 
        .data(d3.range(2010, 2012))         // here we create 2 svg
        .enter().append("svg");
        /* style ... */

var rect = svg.selectAll(".day")           // here we select the 2 svg
    .data(function(d) {                    // and using the data already bound to svg var
            console.log(d);       // we create an array of days
            return d3.time.days(new Date(d, 0, 1), new Date(d, 1, 1));
        })
    .enter().append("rect")              // for each of this days we then create a rect
    .attr("class", "day")
    .attr("width", cellSize)
    .attr("height", cellSize)
    .attr("x", function(d) {
            console.log(d);   // each creation of a new rect in the console
            return week(d) * cellSize;
             })
    .attr("y", function(d) { return day(d) * cellSize; })
    .datum(format);

现在，我对 JS很陌生，对 D3 也很陌生，我希望在控制台中找到类似的东西

2010
Fri Jan 01 2010 00:00:00 GMT+0000 (GMT Standard Time)
Sat Jan 02 2010 00:00:00 GMT+0000 (GMT Standard Time) 
...
2011
Sat Jan 01 2011 00:00:00 GMT+0000 (GMT Standard Time) 
Sun Jan 02 2011 00:00:00 GMT+0000 (GMT Standard Time)
...

事实上，它首先出现了所有的年份，然后出现了所有的日子。我的问题是：D3 如何在如此明显的多重循环中在幕后运作？

4

0 回答 0