I am working on visualizing a sunburst and facing an issue with placing text inside the SVG circle at the center of the sunburst. The circle renders perfectly, but I can't seem to get any text to display in the middle. I have created a demonstration of my attempt on jsfiddle, along with the JavaScript code provided below. Despite looking at other solutions on similar posts, nothing seems to solve this specific problem. I even tried wrapping the element inside a g tag as recommended for rendering text, but still no luck. Please let me know if you need more information. Any assistance would be greatly appreciated.
Thank you!
<html lang="en">
<head>
<title>Sunburst</title>
<!-- external css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<!-- external javascript-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"> </script>
<script src="https://d3js.org/d3.v5.min.js"> </script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div id="sunburst-container" class="col-9"></div>
</div>
</div>
const svg = d3.select("#sunburst-container")
.append("svg")
.attr("width", "200px")
.attr("height", "200px");
const g = svg.append("g")
.attr("transform", "translate(100, 100)");
const parent = g.append("circle")
.attr("r", "50px")
.attr("fill", "#ddddbb");
parent.append("g")
.append("text")
.text("hello world")
.attr('text-anchor', 'middle')
.attr('alignment-baseline', 'middle')
.style('font-size', '12px')
.attr('fill', 'white');