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)}); 

另外請注意，您在function(d)是.text()沒有必要，你可以做到這

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