Question

我有一个森伯斯特的可视化效果，我试图将文本放在森伯斯特中间的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');

Answer 1

您正在向“父”圈子中添加组和文本。我认为SVG原语不能包含任何内容。运行下面的代码片段以查看区别。

提示：使用浏览器开发人员工具调试此类内容–您可以看到要在何处添加项目等。

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>

svg圆中间的D3.js文本未显示

1 个答案: