D3 加上在圆圈中换行的文本答案

【问题标题】：D3 plus wrapping text in circlesD3 加上在圆圈中换行的文本
【发布时间】：2016-08-14 21:05:08
【问题描述】：

所以我一直在尝试使用 D3plus 将文本包裹在圆圈内，但没有成功。在我的应用程序中，我有几个圆圈/文本对，组合成一个“g”元素。在我的代码中，在创建“g”元素并向其附加圆圈和文本后，我调用 d3plus d3plus.textwrap()function，如下所示：

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

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

【问题讨论】：

试试这个代码d3plus.textwrap().container(d3.select("#Text0")).resize(true) .draw();

标签： javascript d3.js d3plus

【解决方案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>

【讨论】：