title: Group each rect and text in D3
body: <p>I am creating a bar graph using <strong>d3.js</strong>. On the on top of each bar I will display some text. When the user hovers over the bar it should show the text. When they hover out the text will disappear. In order to do that I need to group the <code>&lt;text&gt;</code> and <code>&lt;rect&gt;</code> elements inside of a <code>&lt;g&gt;</code> element.</p>
  
  <p><strong>Example</strong></p>
  
  <pre><code>&lt;g class="gbar"&gt;
      &lt;rect x="0" y="50" width="10" height="50" /&gt;
      &lt;text x="15" y="40"&gt;A&lt;/text&gt;
  &lt;/g&gt;
  &lt;g class="gbar"&gt;
      &lt;rect x="11" y="75" width="10" height="25" /&gt;
      &lt;text x="16" y="65"&gt;B&lt;/text&gt;
  &lt;/g&gt;
  &lt;g class="gbar"&gt;
      &lt;rect x="22" y="25" width="10" height="75" /&gt;
      &lt;text x="27" y="35"&gt;C&lt;/text&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p>So this way, I can do a <code>.gbar:hover rect, .gbar:hover text { ... }</code> CSS style to change the color and opacity of both the <code>&lt;rect&gt;</code> and <code>&lt;text&gt;</code> elements. For each data item, how can I put the <code>&lt;rect&gt;</code> and <code>&lt;text&gt;</code> elements in a <code>&lt;g&gt;</code> element using <strong>d3.js</strong>?</p>
  
  <p>Thanks</p>
  
  <p><strong>EDIT</strong>: To add more context, this is what I have so far...</p>
  
  <pre><code>var svg = d3.select('.mygraph')
              .append('svg')
              .attr('height', 100);
  
  svg.selectAll('rect')
     .data(dataSet)
     .enter()
     .append('rect')
     .attr('x', calcX)
     .attr('y', calcY)
     .attr('width', 10)
     .attr('height', calcH);
  
  svg.selectAll('text')
     .data(dataSet)
     .enter()
     .append('text')
     .text(function (d) {
         return d.Text;
     })
     .attr('x', textX)
     .attr('y', textY);
  </code></pre>
  
  <p>That code produces:</p>
  
  <pre><code>&lt;svg&gt;
      &lt;rect x="0" y="50" width="10" height="50" /&gt;
      &lt;rect x="11" y="75" width="10" height="25" /&gt;
      &lt;rect x="22" y="25" width="10" height="75" /&gt;
      &lt;text x="15" y="40"&gt;A&lt;/text&gt;
      &lt;text x="16" y="65"&gt;B&lt;/text&gt;
      &lt;text x="27" y="35"&gt;C&lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I am still very new to <strong>d3.js</strong>.</p>