title: Get width of d3.js SVG text element after it's created
body: <p>I'm trying to get the widths of a bunch of <code>text</code> elements I have created with d3.js</p>
  
  <p>This is how I'm creating them: </p>
  
  <pre><code>var nodesText = svg.selectAll("text")
             .data(dataset)
             .enter()
             .append("text")
             .text(function(d) {
                  return d.name;
             })
            .attr("x", function(d, i) {
                  return i * (w / dataset.length);
             })
            .attr("y", function(d) {
                  return 45;
            });
  </code></pre>
  
  <p>I'm then using the width to create <code>rectangles</code> the same size as the <code>text</code>'s boxes</p>
  
  <pre><code>var nodes = svg.selectAll("rect")
              .data(dataset)
              .enter()
              .append("rect")
              .attr("x", function(d, i) {
                  return i * (w / dataset.length);
              })
              .attr("y", function(d) {
                  return 25;
              })
              .attr("width", function(d, i) {
                //To Do: find width of each text element, after it has been generated
                var textWidth = svg.selectAll("text")
                    .each(function () {
                        return d3.select(this.getComputedTextLength());
                    });
                  console.log(textWidth);
                  return textWidth;
              })
              .attr("height", function(d) {
                  return 30;
              })
  </code></pre>
  
  <p>I tried using the Bbox method from <a href="https://stackoverflow.com/questions/1636842/svg-text-element-width">here</a> but I don't really understand it. I think selecting the actual element is where I'm going wrong really.</p>