title: Changing size of rect to fit inside text
body: <p>I have some text I append to an svg object with D3.js using <code>append('text')</code>.</p>
  
  <p>My code looks like this:</p>
  
  <pre><code>var countries = svg.append("svg:g")
          .attr("id", "countries");
  
  var stateTexts = svg.append('rect')
              .attr('x', xstateText)
              .attr('y', ystateText)
              .attr('width', 'auto')
              .attr('height', 'auto')
  
  var stateText = svg.append('text')  
              .attr('x', xstateText)
              .attr('y', ystateText)  
              .style("font-family", "Arial")
              .style("font-size", "14px")
              .style("font-weight", 'bold');
  </code></pre>
  
  <p>What I'd like is to put that text "inside" a rect which changes size based on the length of the text I append. The rect would have a <code>stroke</code> of <code>1px</code> so as to give the appearance of a box.</p>
  
  <p>How can I accomplish this? Obviously, width and height can't be set to <code>auto</code> (css properties). I need something else there that can work native to D3.</p>
  
  <p>Edit: Confused by the downvote..</p>