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

d3.js, javascript, svg

Solution

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

Problem

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.

Original source

Related problems