如何在svg块中附加多个文本？

Question

我是d3的新手，我尝试将多个文本附加到svg块中。下面是代码

<div id="svg"></div>

<script >

...

let hourName = ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00',]

let hourNameBlock = d3.select("#svg")
              .append("svg")
              .attr('id', 'hourNameBlock')
              .attr("height", 38) 
              .attr("width", 285) 

        hourNameBlock
          .data(hourName)
          .append("text")
          .attr('class', 'hour-name')
          .attr("x", 30)
          .attr('y', (d,i)=>{
            return (i+1)*35
          })
          .text(d=>{
            return d
          })
</script>
....
<style>

.hour-name {
  font-size: 75%;
  fill: #777;
  font-family: Arial, Helvetica;
}

</style>

结果是，它仅显示hourName数组中的一个对象。我尝试使用enter（）方法强制执行多个对象：

        hourNameBlock
          .data(hourName).enter()
          .append("text")
          .attr('class', 'hour-name')
          .attr("x", 30)
          .attr('y', (d,i)=>{
            return (i+1)*35
          })
          .text(d=>{
            return d
          })

但是它直接在html下创建多个文本，而不是在我想要的svg下。有人可以告诉我我在哪里做错了吗？