Get width of d3.js SVG text element after it's created

Question

I'm trying to get the widths of a bunch of text elements I have created with d3.js

This is how I'm creating them:

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;
          });

I'm then using the width to create rectangles the same size as the text's boxes

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;
            })

I tried using the Bbox method from here but I don't really understand it. I think selecting the actual element is where I'm going wrong really.

Solution 1

I would make the length part of the original data:

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;
      })
      .each(function(d) {
        d.width = this.getBBox().width;
      });

and then later

var nodes = svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("width", function(d) { return d.width; });

Solution 2

You can use getBoundingClientRect()

Example:

.style('top', function (d) {
     var currElemHeight = this.getBoundingClientRect().height;
}

edit: seems like its more appropriate for HTML elements. for SVG elements you can use getBBbox() instead.

Comments

[subsci]

what is the 'w' in (w / dataset.length)? I looked at svg text and d3 text and cannot find what 'w' is

[Lars Kotthoff]

The total width you set for the text.