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

Question

标题说明了一切，this 是密码笔。文本未显示在圆圈内。如何将文字放在前面？这是代码：

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>

非常感谢！

Answer 1

您忘记设置文本元素的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);

这是您的 CodePen：http://codepen.io/anon/pen/mOyrMM

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

话虽如此，另一种方法是对组使用translate，而不是为文本或圆圈设置任何位置：

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

结果一样，查看CodePen：http://codepen.io/anon/pen/yVyVYy