Как вставить текстовые элементы для каждого существующего элемента круга в группе svg?

Question

У меня есть эта структура (SVG круг генерируется из CorelDRAW):

<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 class="grad Rijeka" fill="#FEFEFE" transform="matrix(0.415112 -0.0050718 0.0050718 0.415112 415.165 269.91)" r="7"/>
</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"/
<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>

Я опробовал опцию, но это генерирует текстовый узел внутри узла круга.

var grad = karta.selectAll("g.item circle");
var data = grad.append("text")
  .text(function(d, i) {return i+1;})
  .attr("font-family", "sans-serif")
  .attr("font-size", "20px")
  .attr("fill", "black"); 

Я тоже нахожу ответ на этот вопрос: d3.js - как вставить новые родственные элементы и применить его для моего случая:

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

});

var data = karta.selectAll("g.item text")
  .text("function(d, i) {return i+1;}")
  .attr("font-family", "sans-serif")
  .attr("font-size", "20px")
  .attr("fill", "black"); 

Текстовые узлы генерируются в DOM, как я хотел, но текст по какой-то причине не отображается.

Как я могу решить эту проблему? Мне нужно создать текст для каждого круга.

Answer 1

Основная проблема с вашим кодом в том, что это ...

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

... добавляет <text> элементы к <circle> элементам. Конечно, круги не могут быть родительскими для текстов.

Вы должны использовать другие методы, такие как insert. Поскольку 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"></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>

Вот демонстрационная версия (ничего не появится, используйте инструменты dev для проверки SVG):

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg><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 class="grad Rijeka" fill="#FEFEFE" transform="matrix(0.415112 -0.0050718 0.0050718 0.415112 415.165 269.91)" r="7"/></g></svg>