是否可以使用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;
}
关于如何制作他的作品的任何想法？
这是一个如何执行此操作的示例 - 请记住，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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句