title: D3 - Make children fill parent group
body: <p>I am trying to make a simple rectangular structure for single-nested data in D3.  I would like the result to look like the following image:</p>
  
  <p><a href="https://i.stack.imgur.com/yr8nA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yr8nA.png" alt="The desired menu structure"></a></p>
  
  <p>In other words, each group's items should be sized so that all groups take up the same space.</p>
  
  <p>The <a href="http://jsfiddle.net/bradmarxmoosepi/p4duswb5/12/" rel="nofollow noreferrer">JSFiddle that I have made</a> does not yield the correct result:</p>
  
  <pre><code>var item_groups_enter = item_groups.enter()
      .append("g")
      .classed("item-group", true)
      .attr("transform", function (d, i) {
      return ("translate(0, " + 50 * i + ")"); // !!! THIS NEEDS TO CHANGE !!!
  });
  
  // Append a rectangle for each item
  item_groups_enter.append("rect")
      .attr("width", main_group_width)
      .attr("height", 50) // !!! THIS NEEDS TO CHANGE !!!
  .attr("fill", function (d, i) {
      return colours(i)
  });
  
  // Also append a label for each item
  item_groups_enter.append("text")
      .text(function (d) {
      return (d)
  })
      .attr("x", main_group_width * 0.5)
      .attr("y", 25) // !!! THIS NEEDS TO CHANGE !!!
  .style("text-anchor", "middle");
  </code></pre>
  
  <p>I realise that I would somehow need to need to pass the <code>main-group</code>s' data (specifically, the number of children) to the <code>item_group</code>s, but I am unsure how to do this.  I did try setting a custom attribute <code>childCount</code> on the <code>main_group</code>, but the code became quite messy referencing parent nodes (and then grandparent nodes later on).</p>
  
  <p>What would be the way to do this?  I am unsure if I should even be thinking about the solution in terms of D3, or in terms of CSS?</p>