CODEWITHSUNDEEP
javascriptd3.jssvg
Hyacinth
Hyacinth

Reputation: 67

How to insert text sibling elements for each existing circle element of svg group?

I have this structure (svg circle is generated from 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>

and I want this structure:

<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>

I tried down option but this generate text node inside circle node.

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");

I also find this answer for I think the same question: d3.js - how to insert new sibling elements and applied it for my case:

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");

Text nodes are generated in DOM as I wanted, but text it's not displayed for some reason.

How I can solve this problem? I need to generate text for each circle.

Upvotes: 1

Views: 153

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

The main problem with your code is that this...

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

...appends <text> elements to <circle> elements. Of course, circles cannot be parent of texts.

You have to use other methods, like insert. As insert will be quite cumbersome for your specific case, I prefer using a vanilla JavaScript:

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

This will create the following structure:

<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>

Here is a demo (nothing will show up, use the dev tools to inspect the 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>

Upvotes: 1

Related Questions