Question

我想用矩形来包装我的文字。但宽度和高度返回为零。有趣的是，如果我不使用任何函数（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()将仅返回第一个选定的文本节点，因此它的尺寸将应用于所有rects。想象一下首先是一个小文本，另一个是更长的文本。使用您的代码时，较长的代码会获得具有较小尺寸的背景矩形。

这是一个建议：

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

jsfiddle

D3.js在rect中换行文本

1 个答案: