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 がない、2 番目は「未定義のプロパティ '0' を読み取れません」)。別のセレクション内からあるセレクションのプロパティにアクセスするにはどうすればよいですか?