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

Question

是否可以使用 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>

可能的解决方案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>