在每个rect元素下面附加svg：text

Question

很难弄清楚这个问题。

即。如果有一个svg

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

如何使用selectAll在每个rect下面附加一个svg：text并输入function？ （实际上使用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("...");