将数据追加到不同的div在d3.js

Question

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

我有类例1 3种div元素和会喜欢每个返回到被附加到每个div元素数据。

像数据[0]将被附加到所述第一格 数据[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>

此代码生成与每个包含它自己foreignObject /格5个不同的SVG元素。