Accepted answer

You were adding a group and the text to the "parent" circle. I don't think SVG primitives can contain anything. Run the snippet below to see the difference.

Tip: Use the browser developer tools for debugging stuff like this – you can see where items are getting added, etc.

enter image description here

const svg ="#sunburst-container")
  .attr("width", "200px")
  .attr("height", "200px");

const g = svg.append("g")
  .attr("transform", "translate(100, 100)");

  .attr("r", "50px")
  .attr("fill", "#ff0000");

  .text("hello world")
  .attr('text-anchor', 'middle')
  .attr('alignment-baseline', 'middle')
  .style('font-size', '12px')
  .attr('fill', 'white');
<script src=""></script>

<div id="sunburst-container" class="col-9"></div>

Related Query

More Query from same tag