title: Text element not showing on SVG
body: <p>I'm trying to make a bubblechart using D3 and put a text inside the bubble.  I've checked through a lot of examples and understand that the HTML DOM should look like a group tag surrounding the circle and text tag 
  which I believe I have in my jsfiddle example:
  <a href="https://jsfiddle.net/q4nszx34/" rel="nofollow noreferrer">https://jsfiddle.net/q4nszx34/</a></p>
  
  <p>I attempted to make the text appear in the same area as the bubble via:</p>
  
  <pre><code>circles.append("text")  
         .attr("dx", -10)
         .attr("dy", ".35em")
         .text(function (d) {
            return d.key;
          })
          .style("stroke", "gray");
  </code></pre>
  
  <p>However, the text element's location is not at the same location as my bubble, and I'm not sure how to get the bubble's location to set the text's location. </p>
  
  <p>Thank you in advance.</p>