在创建d3.js SVG文本元素后获取其宽度 [英] Get width of d3.js SVG text element after it's created

问题描述

我试图获取一堆

b b b b b b p>这是我如何创建它们：

  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 ，function（d）{
 return 45; 
}）; 
  

然后使用宽度创建 rectangles 与文本的大小相同

  = 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 generated 
 var textWidth = svg.selectAll（text）
 .each（function（）{
 return d3.select（this.getComputedTextLength（））; 
}）; 
 console.log （textWidth）; 
 return textWidth; 
}）
 .attr（height，function（d）{
 return 30; 
}）
  

我尝试使用在这里，但我真的不明白它。我想选择实际的元素是我真的会错了。

解决方案

我会把原始数据的长度部分：

  var nodesText = svg.selectAll（text）
 .data（dataset）
。 enter（）
 .append（text）
 .text（function（d）{
 return d.name; 
}）
 .attr ，function（d，i）{
 return i *（w / dataset.length）; 
}）
 .attr（y，function（d）{
 return 45; 
}）
 .each（function（d）{
 d.width = this.getBBox（）。width; 
}）; 
  

后来

  var nodes = svg.selectAll（rect）
 .data（dataset）
 .enter（）
 .append（rect）
。 attr（width，function（d）{return d.width;}）; 
  

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.

解决方案

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

这篇关于在创建d3.js SVG文本元素后获取其宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！