title: How to group g elements in D3?
body: <p>Say for example I have a g element that contains a rect and text :</p>
  
  <pre><code>var cells = innercanvas
  .selectAll(".newcell")
  .data(treemap)
  .enter()
  .append("g")
  .attr("class", "newcell");
  
   cells
      .append("rect")
      .attr("x", function (d) {
        return d.x;
      })
      .attr("y", function (d) {
        return d.y;
      })
      .attr("id", "rectangle")
      .attr("width", function (d) {
        return d.dx;
      })
      .attr("height", function (d) {
        return d.dy;
      })
      .style("fill", function (d) {
        return d.children ? cfg.color(d.name) : 'none';
      })
      .attr("stroke", "#000000")
      .attr('pointer-events', 'all')
  
  cells
  .append("text")
  .attr("x", function (d) {
    return d.x + d.dx / 2;
  })
  .attr("y", function (d) {
    return d.y + d.dy / 2;
  })
  .attr('dy', '.95em')
  .attr("text-anchor", "middle")
  .text(function (d) { return d.children ? d.name : null })
  </code></pre>
  
  <p>I want to add a parent g element that groups <code>cells</code> based on their common name. For example ,</p>
  
  <pre><code>var parent = d3.selectAll("cells").attr("groupBy",function(d){ return d.children? d.name : null;})
  </code></pre>
  
  <p>This is so that I can display the parent name as a header for these common cells.</p>