D3.js将文本换成矩形

Question

我想要矩形来包裹我的文字。 但是宽度和高度返回为零。 有趣的是，如果我不使用任何function（d）{}而是插入文字，则此代码可以完美运行。

var nodes_enter = nodes.enter()
    .append('g');
var rect = nodes_enter.append("rect")
    .style('fill', function(d) {return d.tag_color_background;});
var text = nodes_enter.append('text')
    .attr('x', 50)
    .attr('y', -50)
    .text(function(d) {return d.tag_text;});
// width and heaight returns 0 :(
rect.attr('width', text.node().getBBox().width)
    .attr('height', text.node().getBBox().height);

Answer 1

如果getBBox（）。width返回0，则文本节点可能没有值。

顺便说一句：变量text是所选元素的数组。 因此text.node()将仅返回第一个选定的文本节点，因此其尺寸适用于所有矩形。 想象一下，先写一个小文本，再写一个更长的文本。 使用您的代码，较长的代码将获得较小尺寸的背景矩形。

这是一个建议：

nodes_enter.each(function() {
    var w = this.getBBox().width,
        h = this.getBBox().height;
    d3.select(this).select('rect').attr({'width': w, 'height': h});
});

的jsfiddle