javascript - D3.js: Text is not showing inside a circle(They are on the same level of an element-group). How do I bring the text to the front? -

the title says all, this codepen. text not showing within circles. how do put text on front?. code:

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

this generated html seems fine since circle @ same level of text in element group should be:

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

thank much!

you forgot set x , y positions of text elements:

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

here codepen: http://codepen.io/anon/pen/moyrmm

the <g> element wrap content , autosize according contents, doesn't position contents.

that being said, alternative using translate groups, , not setting position texts or circles:

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

the result same, check codepen: http://codepen.io/anon/pen/yvyvyy