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

标签 javascript d3.js svg

是否可以使用 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 都添加到第一个 child 。
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>

关于javascript - 使用 D3.js 将每五个 svg 元素包装在一个 div 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43492039/

相关文章:

javascript - Jquery 照片上传只接受 jpeg 不工作

javascript - querySelectorAll vs NodeIterator vs TreeWalker - 最快的纯 JS 平面 DOM 迭代器

javascript - CSS:如何迫使较小的div变成与较大的div相同的高度

zooming - d3.js 缩放 xScale/xAxis

javascript - 为力导向图创建下限(例如力导向直方图)

javascript - 使用 Raphael.js 转换为绑定(bind)框

javascript - iPhone浏览器移动本身

ios - SVG 转换 ="rotate(x,x,x)"不适用于 iOS

javascript - 使用 React-Toolbox 的按钮样式不起作用

javascript - d3.js彩虹图动画增强