title: Calculate width of text before drawing the text
body: <p>I want to display a <code>rect</code> with a <code>text</code> label next to it. The width of the <code>rect</code> should stretch to the width of the svg container, less the width of the the text, which is dynamic and can be of any variable length.</p>
  
  <p><a href="http://jsfiddle.net/pwarvnj2/">JSFiddle</a></p>
  
  <pre><code>var text = 'Foobar';
  var textWidth = 50; //how to calculate this?
  var plotWidth = 400;
  var barWidth = plotWidth-textWidth;
  
  var plot = d3.select(container)
          .insert("svg")
          .attr('width', plotWidth)
          .attr('height', 50);
  
  plot.append("rect")
      .style("fill", "steelblue")
      .attr("x", 0)
      .attr("width", barWidth)
      .attr("y", 0)
      .attr("height", 50);
  
  plot.append("text")
      .attr("x", barWidth)
      .attr("y", 28)
      .text(text);
  </code></pre>
  
  <p>How do I calculate the width of the text using D3, before it is drawn? Or how do I otherwise position and size elements that depend on the dimensions of variable length text?</p>