d3.js - 원 아래에 텍스트 배치

Question

다른 색상으로 다른 반경 원을 표시하고 있습니다. 각 원 아래에 텍스트 (반경 값)를 배치하려고했지만 브라우저 관리자에서 텍스트를 볼 수는 있지만 표시되지 않습니다.

var width=960,height=500; 
    var margin = {top: 29.5, right: 29.5, bottom: 29.5, left: 59.5}; 
    radiusScale = d3.scale.sqrt().domain([1, 100]).range([10, 39]), 
    colorScale = d3.scale.category10(); 



// Create the SVG container and set the origin. 
    var svg = d3.select("#chart").append("svg") 
    .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


    var i =0; 

    while (i<=50) 
    { 

     console.log("i value is " + i + " value of scale " +i+ " is " + radiusScale(i)); 
     var circle = svg.append("g").append("circle") 
          .attr("id","circle" + i) 
          .attr("cx", i*12) 
          .attr("cy", 20) 
          .attr("fill",colorScale(i)) 
          .attr("r", radiusScale(i)) 
        .append("text").attr("dx",i*12).text(function(d){return radiusScale(i)}); 


     i=i+10; 

    } 

난 해당 원 이하 표시하는 SVG 원 대신에 문자를 추가한다 :

다음 코드이다.

Answer 1

SVG는 원 요소에 추가 된 텍스트를 표시하지 않습니다. 당신은 g 요소에 추가합니다

var g = svg.append("g"); 
g.append("circle") 
         .attr("id","circle" + i) 
         .attr("cx", i*12) 
         .attr("cy", 20) 
         .attr("fill",colorScale(i)) 
         .attr("r", radiusScale(i)); 
g.append("text").attr("dx",i*12).text(function(d){return radiusScale(i)}); 

또한 .text()에서 function(d)이 필요하지 않습니다 당신, 당신은 단지

g.append("text").attr("dx",i*12).text(radiusScale(i));