如何在D3.js中根据文本长度调整树节点矩形容器宽度

我最近在做D3.js树形图时碰到个小难题——每个节点是个带文本的矩形，我想让矩形宽度自动适配文本长度，而不是固定死140px，但试了好几种D3的方法都没搞定，对库的细节还是不够熟。

先贴一下我精简后的代码：

var rectW = 140, rectH = 40;

// 绑定节点数据
var node = draw.selectAll('g.node')
    .data(nodes, function(d) { return d.id; });

// 初始化节点组
var nodeLabel = node.enter().append('g')
    .attr('transform', function(d) { return 'translate(' + source.x0 + ',' + source.y0 + ')'; });

// 添加节点矩形
var nodeRect = nodeLabel.append('rect')
    .attr('width', rectW)
    .attr('height', rectH);

// 添加节点文本
var nodeText = nodeLabel.append('text')
    .attr('x', rectW / 2)
    .attr('y', rectH / 2)
    .text(function (d) { return d.name; });

代码里已经建好了SVG组，也加了矩形和文本，但就是不知道怎么拿到每个文本的实际长度，再对应调整矩形宽度。

解决办法 #

多亏了Geraldo Furtado的提示，我加了两段代码就搞定了：

// 动态设置矩形宽度，预留20px左右边距
nodeRect.attr("width", function() {
    return this.nextSibling.getComputedTextLength() + 20;
})

// 把文本重新定位到矩形中心
nodeText.attr('x', function() {
    return (this.getComputedTextLength() + 20) / 2;
})

简单说下逻辑：

• 每个矩形的兄弟元素就是对应的文本（因为先加的矩形后加的文本），所以用this.nextSibling拿到文本元素，再调用getComputedTextLength()获取它渲染后的实际宽度，加20是为了让文本和矩形边缘有留白，不会挤在一起。
• 文本的x坐标也要跟着调整，用文本长度加边距后的总宽度除以2，就能保证文本在矩形里居中了。

内容的提问来源于Stack Exchange，提问作者alecive