d3.js - 各 rect 要素の下に svg:text を追加します

Question

この問題を理解するのに苦労しています。

つまり、svgがある場合

<svg>
<rect id='1'></rect>
<rect id='2'></rect>
<rect id='3'></rect>
<rect id='4'></rect>
</svg>

selectAll を使用して各四角形の下に svg:text を追加し、関数を入力するにはどうすればよいですか? （実際にはjsonデータセットを使用）

私は以下のような結果を出したい...

<svg>
<rect id='1'></rect>
**<text>text here...</text>**
<rect id='2'></rect>
**<text>text here...</text>**
<rect id='3'></rect>
**<text>text here...</text>**
<rect id='4'></rect>
**<text>text here...</text>**
</svg>

Answer 1

これらの要素を生成するために Javascript データを使用している場合、パターンは次のようになります。

var data = [1,2,3,4];
var sel = svg.selectAll("rect").data(data).enter();
sel.append("rect").attr("id", function(d) { return d; });
sel.append("text").text("...");