d3.js - 在每个矩形元素下方附加 svg:text

Question

很难弄清楚这个问题。

即如果有一个svg

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

如何使用 selectAll 和 enter 函数在每个矩形下方附加一个 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("...");