Question

我正在复制此web page的日历热图。我的代码可以在 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在如此明显的多循环中如何在场景后面运行？

D3 selectAll循环方法

0 个答案: