D3 加上用圆圈环绕文字

Question

所以我一直在尝试使用 D3plus 将文本环绕在圆圈内，但没有成功。在我的应用程序中，我有几个 circle/text 对，放在一个 "g" 元素中。在我的代码中，在创建 "g" 元素并向其附加圆圈和文本后，我调用 d3plus d3plus.textwrap() 函数，如下所示：

d3plus.textwrap()
  //selecting the first text element
  .container(d3.select("#Text0"))
  .draw();

但是，文本并没有被换行，而是简单地消失了。文本作为 DOM 中的一个元素仍然可见，但由于某种原因它的大小变为 0x0。有人知道这里出了什么问题吗？

Answer 1

使用方法 resize as true 如下代码：

<!DOCTYPE html>
<meta charset="utf-8">
<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>
<style>
  svg {font-family:"Helvetica","Arial",sans-serif;height: 425px;margin: 25px; width: 400px;}
  .type {fill: #888;text-anchor: middle;}
  .shape {fill: #eee;stroke: #ccc;}
</style>
<svg>
  <circle class="shape" r="85px" cx="275px" cy="300px"></circle>
  <text id="circleResize" class="wrap" y="260px" x="200px" font-size="12">
Appeared Text inside circle </text> 
</svg>
<script>  
  d3plus.textwrap()
.container(d3.select("#circleResize"))
.resize(true)
.draw();
</script>

D3 加上用圆圈环绕文字

D3 plus wrapping text in circles

javascript

d3.js

d3plus