將數據追加到不同的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元素。