Javascript 如何为svg组的每个现有圆圈元素插入文本同级元素？

我有这样的结构（svg圆圈由CorelDRAW生成）：

我也为我认为相同的问题找到了答案： 并将其应用于我的案例：

var grad = karta.selectAll("g.item circle").each(function() {
  var t = document.createElement("text");
  this.parentNode.insertBefore(t, this.nextSibling);

}))

文本节点按照我的要求在DOM中生成，但由于某些原因，它不会显示文本

---

我怎样才能解决这个问题？我需要为每个圆圈生成文本。

代码的主要问题是

var grad = karta.selectAll("g.item circle");
var data = grad.append("text")//etc...

…将

元素附加到

元素。当然，圆圈不能是文本的父对象

你必须使用其他方法，比如。由于

insert

对于您的具体情况来说相当麻烦，我更喜欢使用普通的JavaScript：

d3.selectAll("circle")
.select(function() {
    return this.parentNode.insertBefore(document.createElementNS("http://www.w3.org/2000/svg", "text"), this.nextSibling)
})

这将创建以下结构：

<g class="item"> 
<circle class="grad Pazin" fill="#FEFEFE" transform="matrix(0.415112 -0.0050718 0.0050718 0.415112 342.854 286.821)" r="7"/
<text xmlns="http://www.w3.org/1999/xhtml" font-family="sans-serif" font-size="20px" fill="black">0</text>
<circle class="grad Rijeka" fill="#FEFEFE" transform="matrix(0.415112 -0.0050718 0.0050718 0.415112 415.165 269.91)" r="7"/>
<text xmlns="http://www.w3.org/1999/xhtml" font-family="sans-serif" font-size="20px" fill="black">1</text>
</g>

<g class="item">
    <circle class="grad Pazin" fill="#FEFEFE" transform="matrix(0.415112 -0.0050718 0.0050718 0.415112 342.854 286.821)" r="7"></circle>
    <text></text>
    <circle class="grad Rijeka" fill="#FEFEFE" transform="matrix(0.415112 -0.0050718 0.0050718 0.415112 415.165 269.91)" r="7"></circle>
    <text></text>
</g>

var grad = karta.selectAll("g.item circle");
var data = grad.append("text")//etc...

d3.selectAll("circle")
.select(function() {
    return this.parentNode.insertBefore(document.createElementNS("http://www.w3.org/2000/svg", "text"), this.nextSibling)
})

<g class="item">
    <circle class="grad Pazin" fill="#FEFEFE" transform="matrix(0.415112 -0.0050718 0.0050718 0.415112 342.854 286.821)" r="7"></circle>
    <text></text>
    <circle class="grad Rijeka" fill="#FEFEFE" transform="matrix(0.415112 -0.0050718 0.0050718 0.415112 415.165 269.91)" r="7"></circle>
    <text></text>
</g>