Javascript 用D3.js将每五个svg元素包装在一个div中

是否可以使用javascript而不是jquery将五个svg封装在一个div中，并将每五个新创建的div封装在另一个div中

这是我的密码

d3.csv("example.svg", function(data) {

data.forEach(function(d){

var svgContainer = d3.select(".parentclass").append("svg")
                                    .attr("width",55)
                                    .attr("height",35);

var rectangle = svgContainer.append("rect")
                     .attr("x",0)
                     .attr("y",0)
                     .attr("width",55)
                     .attr("height",35)
                     .attr("fill", "rgb(" + d.r + "," + d.g + "," + d.b + ")");

 })

 });

我期望的输出是

<div class="column1">
<div class="line">
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg></div>
<div class="line">
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg></div>   
 <div class="line">
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg></div>    
 <div class="line">
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg></div>    
 <div class="line">
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg></div>    
</div>

<div class="column2">
<div class="line">
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg></div>
<div class="line">
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg></div>   
 <div class="line">
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg></div>    
 <div class="line">
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg></div>    
 <div class="line">
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg>
 <svg width="55" height="35">....</svg></div>    
</div>

可能的解决方案想法2：

var svgContainer = d3.select(".milk").filter(function(i){ return ((i % 5 === 0) || (i === 1)); }).append("div")
                                            .append("svg")
                                            .attr("width",55)
                                            .attr("height",35);


var test = function (i) {
  i = i + 1;
  return i;

}

---

关于如何制作他的作品有什么想法吗？

这里有一个例子，说明如何做到这一点-请记住，数据还可以接收一个函数，该函数可以返回您需要的任何结构

编辑：更新以显示如何依次侦听项目

var数据=[1,2,3,4,5,6,7]； var列=2； d3.select'.container'.selectAll'.column'.datad3.pairsd3.range0、data.length、Math.floordata.length/columns .enter.append'div'.attr'class'，column' .selectAll'.item'.datad=>data.sliced[0]，d[1] 进来 .附加'div' .attr'class'，'item' .append'svg' .append'text'.textd=>d.attr'y'，20 .集装箱{ 背景：浅蓝色； 填充物：5px； } .项目{ 背景：浅青色； 填充物：5px； 保证金：5px； } .栏目{ 背景：浅绿色； 填充物：5px； 利润率：10px； } 文本{ 填充：黑色； 笔画：黑色； 字体大小：20px； }

---

谢谢你的回答，我正努力让这一切顺利进行。在你的例子中，有没有关于如何依次显示数字的想法？@evnartabt我更新了我的答案，以说明如何做到这一点。我为此苦苦挣扎了好几天，我甚至都没有接近！谢谢你的回答！！！

var svgContainer = d3.select(".milk").filter(function(i){ return ((i % 5 === 0) || (i === 1)); }).append("div")
                                            .append("svg")
                                            .attr("width",55)
                                            .attr("height",35);


var test = function (i) {
  i = i + 1;
  return i;

}