display text inside circle on mousehover using d3.js

Question

I have been struggling past 2 days to achieve below requirements. Circle is behaving in abnormal and indeterminate way.

Requirements 1.Text should come inside the circle when circle is full hovered. 2.When circle is hovered and you take mouse cursor on text,the circle and text should not flicker. 3.Invisible circle should come back to its previous radius.

Here is the code

d3.select("#outerG")
    .insert("g", "#invisibleG").attr("class", "maincircles").append("circle")
    .attr("cx",120)
    .attr("cy", 120)
    .attr("r", 30)
    .attr("class", "circle")
    .style('fill', '#19b2e8');


d3.select("#invisibleG").append("g")
    .attr("class","invisibleCircle")
    .append("circle")
    .attr("cx",120)
    .attr("cy",120)
    .attr("r",30)
    .attr("class","inviCircle")
    .style('fill-opacity', '0')
    .attr("prevRadius",30)
    .attr("xcoords",120)
    .attr("ycoords",120)
.on("mouseover",function(){

var r=d3.select(this).attr("r");
d3.select(this).style('fill','#19b2e8')
                .style('fill-opacity','1')
                .transition()
                .duration(1000)
                .attr("r",50);

    var prevRadius=d3.select(this).attr("prevRadius");
    var xcoord= d3.select(this).attr("xcoords");//to centre text
    var ycoord= d3.select(this).attr("ycoords");//to centre text
        d3.select(this.parentNode).append("text")
            .transition()
            .duration(1000)
             .text("Hello")
              .attr("x",120)
              .attr("y",120)
              .style("font-family","sans-serif")
              .style("font-size","20px")
              .style("text-anchor","middle");
                     })                 

.on("mouseout",function(){
d3.select(this.parentNode).select("text").remove();
//d3.select(this).interrupt();
var r=d3.select(this).attr("prevRadius");
            d3.select(this)
            .transition()
            .duration(1000)
           .attr("r",r).attr("stroke-width",0)
                 .style('fill-opacity','0');
                 });

here is the HTML

<svg width="300" height="300">
    <g id="outerG">
        <g id="invisibleG"></g>
    </g>
</svg>

Check fiddle http://jsfiddle.net/razC9/5/

Answer 1

Based on your requirements, here is a working fiddle. It is done with 1 circle, instead of two, drying up the code some. EDIT: Timing set to flash text once radius is fully expanded:

http://jsfiddle.net/razC9/42/

Key snippet:

.on("mouseover", function(){ 

    d3.select(this)
       .transition().attr("r", 50).duration(750)
       .style("fill", "#19b2e8")
       .style('fill-opacity','1');

    d3.select("#outerG") .append("text")
      .transition().delay(750)
      .attr("class", "text")
      .text("Hello")
      .attr("x", 100)
      .attr("y", 120)
      .attr("fill",  "black");

 })
 .on("mouseout", function(){ 
      d3.select(this)
         .transition().attr("r", 20)
         .style("fill", "#19b2e8");

    d3.select("#outerG").select(".text").remove();      
 });

Answer 2

Problem is that text is messing up mouse events on mouseover and solution is to add this css

svg text {
  pointer-events: none;
}

Here is how it looks like now - http://jsfiddle.net/razC9/7/