SVG的getComputedTextLength函数总是返回零

Question

你好，我尝试将这个可缩放的d3树状图集成自

http://mbostock.github.io/d3/talk/20111018/treemap.html

但是getComputedTextLength()总是返回0。 我也尝试了getBBox()，但它返回一个所有属性都为零的对象。

    .text(function(d) { return d.name; })
    .style("opacity", function(d) {
         d.w = this.getComputedTextLength(); 
         return d.dx > d.w ? 1 : 0;
    });

我需要把我的文本包在一个tspan里吗？
还有什么其他原因会导致这种情况发生？

- dotmindlabs

---

所以你的意思是你正在使用完全相同的代码，但它对你不起作用？ - Lars Kotthoff

是的，一切都正常工作，除了我总是得到0的getComputedTextLength，所以我的文本不透明度总是设置为1。 - dotmindlabs

如果您使用的是与链接中提供的代码完全相同的代码，则这必须是浏览器错误。 - Lars Kotthoff

使用 Google Chrome 如果我设置断点：

this <text x= "17.110570629550967" y= "16.420567484327563" dy= ".35em" text-anchor= "middle">EC 6191A</text> this.getComputedTextLength() 0

- dotmindlabs

是的，但使用同一浏览器，我可以看到这个例子。 - dotmindlabs

那么你已经修改了吗？你做了哪些更改？ - Lars Kotthoff

Answer 1

我知道这已经晚了一年，但最近我也遇到了同样的问题，这可能会对某些人有所帮助。 this.getComputedTextLength()如果在渲染text元素之前，或者容器或其任何父容器在渲染text元素时设置为display:none，则返回0。

- OrionMelt

---

我应该先谷歌一下这个问题，这样可以节省很多时间！在 SVG 可见后，通过添加一个小的 setTimeout 来延迟渲染文本，解决了我的问题。 - nadieh

@mar 问道：能否请您添加一下如何在文本元素渲染后定位它的方法？ - Paebbels

当元素被渲染时是否有可能执行代码？因为对我来说setTimeout不是一个很好的解决方案。 - JuHwon

感谢您的回答。我的顶级svg父节点尚未附加到DOM，因此getComputedTextLength始终返回0。这帮助我找出了问题所在。 - devth

Answer 2

现在在2021年面临同样的问题，但我能够通过使用d3.select(this).node().getComputedTextLength();来解决它，请查看以下代码行：

.text(function (d) {
    return this.getValueText(d);
})
.attr('font-size', function (d) {
    d.computedTextLength = d3.select(this).node().getComputedTextLength();
    return self.getFontSizeForItem(d);
});

- Juan Domínguez