javascript - 在 d3.js 中组合来自不同元素的数据

Question

我正在尝试在 d3.js 中创建带有矩形的文本。我将它们放在一个 svg 组中。必须首先创建矩形以使其位于底部，但是在将数据绑定到文本框后，我必须再次设置矩形的宽度，我不知道该怎么做。

有了数据["hello","world"]，html 应该看起来像这样（不包括一堆属性）：

<svg>
    <g>
        <rect></rect>
        <text>Hello</text>
    </g>

    <g>
        <rect></rect>
        <text>World</text>
    </g>
</svg>

我可以用这个在 d3.js 中完成：

var groups = svg.selectAll("g")
    .data(["hello","world"]).enter()
    .append("g");

var rects = groups.append("rect")
    .attr("height",15)
    .attr("width",10); // placeholder

var text = groups.append("text")
    .text(function(d) {return d;});

在这个块之后，我尝试像这样设置矩形宽度：

rects.attr("width", function (d, i) {return text[i].getComputedTextLength();});

或者像这样：

rects.attr("width", function (d, i) {return text[i][0].getComputedTextLength();});

两者都抛出错误（第一个说对象数组没有函数getComputedTextLength，第二个说“无法读取未定义的属性'0'”）。如何从另一个选择中访问一个选择的属性？