title: Modify Existing d3 code - dynamic rectangle height to match text
body: <p>I am working with the code at <a href="http://codepen.io/jey/details/jmClJ" rel="nofollow">CodePen</a> as a base to build a Gantt Chart for my needs.  However, I am trying to modify the code so that the actual Rectangle heights accommodate the text that is given to them.  In the example shown, all of the task texts are one word long so they fit within the rectangle.  However, if a task is several words long and the rectangle width is short, the text does not wrap and overflows.  </p>
  
  <p>How could I modify the code so that the rectangle heights are drawn to fit the text within them, or alternatively have the text wrap and have the rectangle grow (in height) to accommodate the text?</p>
  
  <p>Right now the rectangle heights are hard-coded in the CodePen example:</p>
  
  <pre><code>var barHeight = 20;
  </code></pre>
  
  <p>The example also adds the text in the following way to the rectangles (see below).  I've experimented with trying to put html in the rectangle instead of text to no avail:</p>
  
  <pre><code> var rectText = rectangles.append("text")
                 .text(function(d){
                  return d.task;
                 })
  </code></pre>