用D3.js包装div中的每五个svg元素

Question

是否有可能在一个div中包装五个svg，并且每个五个新创建的div都用javascript（而不是jquery）包装在另一个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> 

可能的解决思路1：

伊夫添加以下代码变种svgContainer 但所有的SVG是前在第一个孩子补充。

if ((i % 5 == 0) || (i == 0)) { 

    var body = d3.select('.parentclass') 
    .append('div') 
    .attr('class','childclass'); 
    } 

    i = i + 1; 

可能的解决思路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; 

} 

如何使他的工作任何想法？

Answer 1

下面是一个例子，如何做到这一点 - 记住data也可以接收一个函数，可以返回任何你需要的结构。

编辑：更新，以显示物品如何可以反过来听

var data = [1,2,3,4,5,6,7]; 
 
var columns = 2; 
 

 
d3.select('.container').selectAll('.column').data(d3.pairs(d3.range(0, data.length, Math.floor(data.length/columns)))) 
 
    .enter().append('div').attr('class', 'column') 
 
    .selectAll('.item').data(d => data.slice(d[0], d[1])) 
 
    .enter() 
 
    .append('div') 
 
    .attr('class', 'item') 
 
    .append('svg') 
 
    .append('text').text(d => d).attr('y', 20)

.container { 
 
    background: lightblue; 
 
    padding: 5px; 
 
} 
 

 
.item { 
 
    background: lightcyan; 
 
    padding: 5px; 
 
    margin: 5px; 
 
} 
 

 
.column { 
 
    background: lightgreen; 
 
    padding: 5px; 
 
    margin: 10px; 
 
} 
 

 
text { 
 
    fill: black; 
 
    stroke: black; 
 
    font-size: 20px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div class="container"></div>