D3.js v7中无法生成文本包围bbox问题求助

你的代码里存在几个关键错误，导致包围盒无法正常生成，以下是具体问题和修复方案：

1. 变量名不匹配 + DOM节点调用错误 #

你定义的文本选择器变量是enteringText，但后续错误使用了text.nodes()；而且nodes()返回的是节点数组，不能直接调用getBBox()方法。如果是单个文本元素，用enteringText.node()获取单个DOM节点；如果是多个文本，需要遍历每个节点单独处理。

2. 语法标点错误 #

代码中.attr("width".bbox.width)把逗号写成了点号，这会直接导致语法报错，无法正确设置矩形宽度。

3. 未处理多文本元素场景 #

如果dataJobs对应多个数据项，你需要为每个文本单独生成包围矩形，而不是只创建一个矩形。

修复后的完整代码 #

function jobsCreation() {
    // 创建文本元素
    let enteringText = dataJobs
        .enter()
        .append("text")
        .attr("x", d => d.posX)
        .attr("y", d => d.posY)
        .text(d => d.name);

    // 遍历每个文本，生成对应的包围矩形
    enteringText.each(function() {
        const bbox = this.getBBox();
        svg.append("rect")
            .attr("x", bbox.x)
            .attr("y", bbox.y)
            .attr("width", bbox.width) // 修复标点错误
            .attr("height", bbox.height)
            .style("fill", "#ccc")
            .style("stroke", "black")
            .style("stroke-width", "1.5px");
    });
}

额外提示 #

• 确保svg变量已正确指向你的SVG容器，否则无法添加矩形元素。
• 如果使用了自定义字体，建议等待字体加载完成后再获取bbox，避免尺寸计算错误：

  document.fonts.ready.then(() => {
      // 在这里执行文本和包围盒创建逻辑
      jobsCreation();
  });
  

内容的提问来源于stack exchange，提问作者Spiritdon