div内の5つのsvg要素をD3.jsでラップする

Question

div内に5つのsvgをラップすることは可能ですか？javascript（jqueryではなく）を使用して別のdiv内に5つの新しい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：

アイブ氏は、VaRの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>