Unable to add text to circles in d3
<p>I am trying to create a bubble chart as shown in the following image
<a href="https://i.stack.imgur.com/TQPYj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TQPYj.png" alt="enter image description here"></a></p>

<p>Now i want to add some text label to each bubble. But I am not able to do so.
From what i have researched so far i will need to add to add these circles to separate 'g' nodes. 
Can anybody guide me as to how can i achieve this task.</p>

<p>Following is my code </p>

<pre><code>BubbleChart.prototype.create_vis = function() {
    var that,
    _this = this;
    this.vis = d3.select("#"+div)
    .append("svg")
    .attr("viewBox", "0 -20 "+(divWidth)+" "+(divHeight + margin.top + margin.bottom)+" ")
    .append("g")
    .attr("id", "svg_vis");

    var gradient = this.vis.append("svg:defs").selectAll("radialGradient").data(this.data).enter()
    .append("svg:radialGradient")
    .attr("id", function(d) {
        return "gradient" + (d[columns[0]]).replace(/[^a-zA-Z0-9]/g, '', 'gi');
    })
    .attr("fx", "5%")
    .attr("fy", "5%")
    .attr("r", "50%")
    .attr("spreadMethod", "pad");

    gradient.append("svg:stop")
    .attr("offset", "0%")
    .attr("stop-color", "rgb(240,240,240)")
    .attr("stop-opacity", 1);

    gradient.append("svg:stop")
    .attr("offset", "80%")
    .attr("stop-opacity", 1);
    parent.$("#legends").val(JSON.stringify(chartMap));
    gradient = this.vis.append("svg:defs").selectAll("radialGradient").data(this.data).enter()
    .append("svg:radialGradient")
    .attr("id", function(d) {
        return "gradientDrill";
    })
    .attr("fx", "5%")
    .attr("fy", "5%")
    .attr("r", "50%")
    .attr("spreadMethod", "pad");

    gradient.append("svg:stop")
    .attr("offset", "0%")
    .attr("stop-color", "rgb(240,240,240)")
    .attr("stop-opacity", 1);

    gradient.append("svg:stop")
    .attr("offset", "80%")
    .attr("stop-color", drillShade)
    .attr("stop-opacity", 1);
   var node = this.vis.append("g") 
    this.circles = this.vis.selectAll("circle")
    .data(this.nodes);
    that = this;

    var circles1=this.circles.enter()
    .append("circle")
    .attr("class", "node")
    .attr("fill", "blue")
    .attr("stroke-width", 2)
    //            .attr("stroke", function(d) {
    //                return "url(#gradient" + (d.name).replace(/[^a-zA-Z0-9]/g, '', 'gi') + ")";
    //            })
    .attr("id", function(d) {
        return d.name+ ":" + d.id + "_" + d.measure;
    })
    .attr("opacity",".7")
    .attr("index_value", function(d, i) {
        return "index-" + d.name.replace(/[^a-zA-Z0-9]/g, '', 'gi');
    })
    .attr("class", function(d, i) {
        return "bars-Bubble-index-" + d.name.replace(/[^a-zA-Z0-9]/g, '', 'gi')+div;
    })


    return this.circles.transition().duration(500)
    .attr("r", function(d) {
        return d.radius;
    })

};
</code></pre>

<p>Thanks in advance!</p>