javascript - D3 中的文本换行

Question

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

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

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

Answer 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");

Answer 2

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

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

Mbostock 有一个包装长标签的例子。它可以适用于在其他情况下换行文本，尽管它不是微不足道的。

D3plus支持文本换行，如下所示：

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

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

Answer 3

您需要使用svg:foreignObjectHTMLdiv或类似的东西来完成这项工作。SVG 本身不会换行文本。