如何在div中附加的svg元素中添加数据

Question

我正在查看我从jsfiddle借来的代码。

var svg = d3.select("#calendars").selectAll("svg")
 .data(firstDayOfEachMonth)
.enter().append("svg")
 .attr("width", width)
 .attr("height", height)
.append("g")
attr("transform", "translate(" + (width - cellSize * 7 - 1) + "," + ((height   
 -    cellSize * 6) / 2) + ")");

我希望在div下使用此代码。为此，我创建了一个div并在其中附加了一个svg元素，但是我无法理解如何将上述代码与我的svg元素一起使用：

 mydiv = d3.select("body")  
.append("div")
.attr("id","MainDiv")
.style("position", "absolute")
.style("font-size", "18px") 
.style("background", "gray")
.style("border", "1px black solid")
.style("border-radius", 4+"px")
.style("top", (15)+"px")
.style("left",(15)+"px")
.style("height",245+"px")
.style("width",245+"px")
.style("visibility", "visible");
 mysvg= mydiv.append("svg")

我比使用下面的代码但是它没有任何建议。

 var svg = d3.select("#calendars").selectAll("svg")
 .data(firstDayOfEachMonth)
 .enter().append("mysvg")
 .attr("width", width)
 .attr("height", height)
 .append("g")
 .attr("transform", "translate(" + (width - cellSize * 7 - 1) + "," + ((height   
 -    cellSize * 6) / 2) + ")");