title: How do you get the width of a shape that's already created in d3?
body: <pre><code>cells.append('rect')
        .attr('x', function (d) { return d.x; })
        .attr('y', function (d) { return d.y; })
        .attr('height', function (d) { return d.dy; })
        .attr('fill', function (d) { return d.children ? null : color(d.parent.name); })
  
  cells.append('text')
        .attr('x', function (d) { return d.x + d.dx / 2 })
        .attr('y', function (d) { return d.y + d.dy / 2 })
        .attr('fill', 'white')
        .attr('font-size', 14)
        .text(function (d) {
           if (d.name.length &lt; cells.rect.width) {
                return d.name;
           }
         });
  </code></pre>
  
  <p>I don't know why </p>
  
  <p><code>cells.rect.width</code></p>
  
  <p>doesn't work? But what I want to know is how I get check the width of the shape before appending the text on to the shape.</p>
  
  <p>I also tried pushing the width of the shapes to an array, and then use indexing loop to loop through the array to check to see if the length of the name is longer than the width of the box. The problem with that is when the shapes are created, the shape(box) with the biggest area are created first. On the other hand, when text are appended, it starts from bottom right to top left.</p>
  
  <p>I understand that the length of the text and pixels are two different units, but I am going to put in a simple ratio convert it. How do I get the width of the rect that is already drawn on the screen?</p>