D3加上用圆圈包装文本

D3 plus wrapping text in circles

本文关键字：包装 文本 D3      更新时间：2023-09-26

所以我一直在尝试使用3dplus，以便在圆圈内包装文本，但没有成功。在我的应用程序中，我有几个圆圈/文本对，放在一起成为一个"g"元素。在我的代码中，在我创建"g"元素并添加圆圈和文本之后，我像这样调用d3plus d3plus.textwrap()函数:

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

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

按以下代码使用方法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>
相关文章：