Javascript D3.js：文本未显示在圆圈内（它们位于元素组的同一级别）。如何将文本放在前面？

标题说明了一切，是密码笔。文本未显示在圆圈内。我怎样把文字放在前面？。代码如下：

var dataset = [ 5, 10, 15, 20, 25, 40 ];

    var w=600,h=600;

    var svg=d3.select("body").append("svg")
                                      .attr("width",w)
                                      .attr("height",h);
    //1st level:All circles group
    var circlesGroup = svg.append("g").classed("general-group",true);
    //2nd level: Group of circle and text
    var elementGroup= circlesGroup
      .selectAll('circle')
      .data(dataset)
      .enter()
      .append("g").classed("element-group",true);

    var circle=elementGroup.append('circle');

    var circleAttributes= circle
      .attr("cx", function(d,i){return i*80+40;})
      .attr("cy", h/2)
      .attr("r", 20)
      .attr("stroke","black")
      .attr("fill", "white")
      .classed("circle",true);


    //text to show
      elementGroup.append("text")
       .attr("text-anchor", "middle")
       .text(function(d) {
         return parseInt(d);
       }).classed('tweet-number', true);

      circle.on('click', function(d,i){

        svg.selectAll('circle').transition().duration(500).attr("r", 20);

      if(d3.select(this).attr("r")==20){
          d3.select(this).transition().duration(500).attr("r", 36);
        }else{
          d3.select(this).transition().duration(500).attr("r", 20);
        }

      });

    //adding background image
    var circlesSelection=svg.selectAll('circle');

这是生成的html，看起来不错，因为圆圈与元素组中的文本处于同一级别：

<svg width="600" height="600">
    <g class="general-group">
        <g class="element-group">
            <circle cx="40" cy="300" r="20" stroke="black" fill="white" class="circle"/>
            <text text-anchor="middle" class="tweet-number">5</text>
        </g>
        <g class="element-group">
            <circle cx="120" cy="300" r="36" stroke="black" fill="white" class="circle"/>
            <text text-anchor="middle" class="tweet-number">10</text>
        </g>
        <g class="element-group">
            <circle cx="200" cy="300" r="20" stroke="black" fill="white" class="circle"/>
            <text text-anchor="middle" class="tweet-number">15</text>
        </g>
        <g class="element-group">
            <circle cx="280" cy="300" r="20" stroke="black" fill="white" class="circle"/>
            <text text-anchor="middle" class="tweet-number">20</text>
        </g>
        <g class="element-group">
            <circle cx="360" cy="300" r="20" stroke="black" fill="white" class="circle"/>
            <text text-anchor="middle" class="tweet-number">25</text>
        </g>
        <g class="element-group">
            <circle cx="440" cy="300" r="20" stroke="black" fill="white" class="circle"/>
            <text text-anchor="middle" class="tweet-number">40</text>
        </g>
    </g>
</svg>

5.
10
15
20
25
40

---

多谢各位

您忘记设置文本元素的

x

和

y

位置：

//text to show
elementGroup.append("text")
    .attr("text-anchor", "middle")
    .attr("x", function(d,i){return i*80+40;}
    .attr("y", h/2)     
    .text(function(d) {
        return parseInt(d);
     })
    .classed('tweet-number', true);

这是你的密码笔：

元素包装其内容并根据内容自动调整大小，但它不定位内容

也就是说，另一种方法是使用

翻译
到组中，而不是为文本或圆圈设置任何位置：

elementGroup.attr("transform", function(d,i){
    return "translate(" + (i*80+40) + "," + h/2 + ")"; 
});

结果是一样的，检查代码笔：
答案很好，我也会尝试第二种方法，只是为了学习，d3有没有办法在不使用css的情况下进行垂直和水平定位？在代码笔上，如果我按下数字，你所做的调整圆圈大小的一次点击不再起作用。如果圆也展开，则数字不会展开，我是否应该在元素组上使用变换？…在这种情况下，常用的方法是什么？我想按圆圈上的任意位置，让它展开……首先：你的代码不会告诉文本展开。为了避免数字妨碍点击事件，将文本的“指针事件”设置为“无”。