用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>