score:1

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 = d3.select("#sunburst-container")
  .append("svg")
  .attr("width", "200px")
  .attr("height", "200px");


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

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


g.append("text")
  .text("hello world")
  .attr('text-anchor', 'middle')
  .attr('alignment-baseline', 'middle')
  .style('font-size', '12px')
  .attr('fill', 'white');
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

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


Related Query

More Query from same tag