У меня есть визуализация солнечных лучей, когда я пытаюсь поместить текст в кружок svg в середине солнечных лучей. Я могу отрисовать круг нормально, но не могу отобразить текст в середине. У меня есть jsfiddle в качестве примера моей попытки, вместе с кодом js ниже. Я нашел несколько других постов здесь, но они, кажется, не исправляют этот конкретный пример. Я также видел, как размещение элемента внутри тега g должно заставить его отображать текст, а объект text находится в html, но по какой-то причине текст не отображается. Дайте мне знать, если есть больше информации, которую я могу предоставить, любая помощь очень ценится.
Спасибо!
<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');