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

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

1 个答案: