d3.js - 将文本放在圆圈下方答案

【问题标题】：d3.js - place text below the circled3.js - 将文本放在圆圈下方
【发布时间】：2013-11-20 12:30:58
【问题描述】：

我用不同的颜色显示不同的半径圆。我试图将文本（半径值）放在每个圆圈下方，但没有显示，尽管我可以在浏览器检查器中看到文本。

以下是代码：

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 中添加文本而不是圆圈以显示在相应圆圈下方。

【问题讨论】：

标签： d3.js

【解决方案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));

【讨论】：