D3中的文本换行[重复]答案

【问题标题】：Text-Wrapping in D3 [duplicate]D3中的文本换行[重复]
【发布时间】：2012-11-05 15:15:47
【问题描述】：

我一直在研究文本换行，但其中很多都涉及使用 css 进行文本换行？

有什么方法可以让我使用 D3 进行文本换行，如下所示：

  p.append("text")
   .attr("transform", "translate(-20, -30)")
   .text("Relevance")
   .style("font", "bold 12px Arial");

【问题讨论】：

标签： javascript css d3.js

【解决方案1】：

我假设p 在这里还不是 xhtml 元素。如果是像g 这样的svg 元素，您可以将foreignObject 附加到它，然后像下面的代码一样附加像div 这样的xhtml 元素。

p = svg.append('g');
p.append("foreignObject")
 .attr("x", 5)
 .attr("y", 5) 
 .attr("width", 100) // replace with width you want 
 .attr("height", 100)// replace with height you want
 .append("xhtml:div")// replace with html element you want
 .append("p")
 .text("Relevance");

【讨论】：

【解决方案2】：

其他答案建议使用svg:foreignObject。遗憾的是，没有任何版本的 IE 支持foreignObject，甚至不支持最新版本（撰写本文时为 11 版）。跨其他浏览器的支持与一些不支持的转换不一致。所以，如果你不需要过渡并且不需要支持 IE，那么你可以使用foreignObject；这是最简单的方法，因为它支持 HTML + CSS。

否则，如果您需要 IE 支持或转换...

Mbostock 有一个Wrapping Long Labels 的示例。它可以适用于在其他情况下换行文本，尽管它不是微不足道的。

D3plus 支持text wrapping 就像这样：

d3plus.textwrap()
  .container(d3.select("#rectWrap"))
  .draw();

我用过 D3plus。它非常易于使用。但是 D3plus 有其他你可能不想要的功能，所以你也可以考虑d3textwrap，一个只添加文本换行的插件。

【讨论】：

【解决方案3】：

您需要将svg:foreignObject 与HTML div 或类似内容一起使用才能完成这项工作。 SVG 本身不会换行。

【讨论】：

svg:foreignObject 不受任何版本的 IE 支持。 Chrome 也不支持 foreignObject 上的转换。
使用 foreignObject 不是解决这个问题的最佳方案。关注@user879121