svg - 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?
还有什么其他原因会产生这种情况？

Answer 1

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

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