Question

我有一个简短的测试我在d3.js上运行，我是该语言的新手，所以原谅我的愚蠢问题。

我有三个带有类example1的div元素，并希望将每个返回的数据附加到每个div元素。

类似数据[0]将附加到第一个div 数据[1]附加到第二个div .. 我现在的问题是它将所有数据附加到每个div

<script type="text/javascript">
    pdata = [10,12,6,8,15];

     selectDIV = d3.select(".example1");

    selectDIV.selectAll("p")
         .data(pdata)
         .enter()
         .append("p")
         .text(function(d){return d;});
  </script>

谢谢。

Answer 1

这是创建div的小提琴：https://jsfiddle.net/thatoneguy/sht1z8vy/

pdata = [10,12,6,8,15];

var svg = d3.select('body')
//.append('svg') //not appending svg as you can't append HTML elements to svg
.attr('width', 500).attr('height', 500);

     
svg.selectAll('div')
  .data(pdata)
  .enter().append('div')
  .attr('class','divs') 
  .text(function(d){ return d;})

.divs { 
  background: red; 
  width:60px;
  height:60px;
  display:inline-block;
  float:left;
  margin:5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

我没有将svg附加到正文，因为你无法将HTML元素附加到SVG。

但是你可以附加foreignObjects。看到这个小提琴：http://jsfiddle.net/thatoneguy/n94hrpps/2/

以下是代码：

pdata = [10,12,6,8,15];

var svg = d3.select('body')
//.append('svg')
.attr('width', 500).attr('height', 500);
 
svg.selectAll('div')
  .data(pdata)
  .enter().append('svg')
  .attr('width', 60)
  .attr('height',60)
  .append('foreignObject')
  .attr('class','divs') 
  .attr('width', '60px')
  .attr('height','60px')
  .attr('background-color', function() { return 'red'; }) 

  .text(function(d){ return d;})

.divs { 
  background: blue; 
   
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

此代码生成5个不同的SVG元素，每个元素都包含自己的foreignObject / div。

将数据附加到d3.js中的不同div

1 个答案: