title: D3 expanding rectangle's text is not adjusted
body: <p>I have a rectangle and a text created through D3 which are grouped together like below.</p>
  
  <pre><code>&lt;g&gt;
  &lt;rect&gt;&lt;/rect&gt;
  &lt;text&gt;&lt;/text&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p>In a javascript function I'm expanding this rectangle's width to allow the the value of text to be displayed in one go. (If the value is too long as the text value is set dynamically). This is working fine. However even though the rectangle width is expanding depending on the text value size , D3 text element is not showing  the complete text value that is added, eventually the text is moved to left and the first bit of it can't be seen. </p>
  
  <p>Do I need to increase the text element's width too or  what would be the solution for this?</p>
  
  <p>[UPDATE]</p>
  
  <p>Following is the current code. </p>
  
  <pre><code>var elms = d3.selectAll("[id=s]"); // has the rectangle and text elements 
          var s  = d3.selectAll("[id=s]").selectAll("text"); // just the text elements
         var minimumValue = 100;
          // updating rectangle width 
         elms.attr('width', function() { return dynamic &lt; minimumValue ? minimumValue : dynamic;});
  </code></pre>
  
  <p>Now I need a way to update the position of the text element when the rectangle is expanded. Hope this is more clear. I just tried manually updating 'x' property of text element that works. But can I derive this value dynamically to set it within this function?</p>