Javascript D3.js:文本属性未正确追加？

我是d3.js的新手，我正在创建一个简单的带有两条横线的水平条形图。我想把文本标签放在两个栏上。根据我的研究，下面的代码看起来是正确的，但屏幕上没有显示文本。从开发人员控制台看，似乎没有添加文本元素

下面是javascript代码：

var dataArray = [23, 13];

var svg = d3.select("svg.d3svg")
  .attr("height", "20%")
  .attr("width", "100%")
  .selectAll("rect")
  .data(dataArray)
  .enter().append("rect")
  .attr("height", "7")
  .attr("width", "250")
  .attr("y", function(d, i) {return (i * 40) + 50 })
  .attr("x", "0")
  .attr("class", "d3bar");

  svg.selectAll("text")
  .data(dataArray)
  .enter().append("text")
  .attr("class", "text-svg")
  .text(function(d) {return d})
  .attr("x", "0")
  .attr("y", function(d, i) {return (i * 40) + 50});

文本svg类仅包含：

.text-svg {
  fill: white;
  font-family: sans-serif;
}

这段代码正确地以html页面上的svg元素为目标，因为这些条被放置在我想要它们的位置，但我无法获得要显示的文本

---

谢谢你的帮助

根据@rioV8的评论，您需要重新构造

text

和

rect

节点是

g

的子节点，如下所示：

var-dataArray=[23,13]；
var svg=d3.选择（“svg”）
.attr（“高度”、“20%”）
.attr（“宽度”、“100%”）
var bar=svg.selectAll（“g”）
.数据（数据阵列）
.enter（）.append（“g”）
var rect=bar.append（'rect'）
.attr（“高度”、“7”）
.attr（“宽度”、“250”）
.attr（“y”，函数（d，i）{
返回（i*40）+50
})
.attr（“x”、“0”）
.attr（“类别”、“d3bar”）；
var text=bar.append（'text'）
.attr（“类”、“文本svg”）
.文本（功能（d）{
返回d
})
.attr（“x”、“0”）
.attr（“y”，函数（d，i）{
返回（i*40）+45
});

text
不是
rect
允许的子标记。使用
g
并将
rect
和
text
放在
g
中，或者将
text
作为
rect
的兄弟，谢谢您的评论。我怀疑可能是这样的。我现在正在解决这个问题。非常感谢你给我一个非常详细的答案。你的解决方案对我非常有效。非常感谢。