d3.js内の異なるdivにデータを追加

Question

私はd3.jsで実行している短いテストをしています。私は言語に新しいので、私のばかな質問を赦してください。

私はクラスexample1で3つのdiv要素を持ち、各div要素に返される各データを追加したいと考えています。データのように

が[0] データは、[1]第二のdivに追加最初の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を追加していません。

ただし、foreignObjectを追加できます。このフィドルを参照してください。

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/DIVを含むそれぞれに5種類のSVG要素を生成します。http://jsfiddle.net/thatoneguy/n94hrpps/2/

ここでは、コードです。