javascript - 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