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有一个Wrapping Long Labels的例子。它可以适用于在其他情况下包装文本，虽然它不是微不足道的。

D3plus支持text wrapping，如此：

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

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

Answer 3

您需要将svg:foreignObject与HTML div或类似内容一起使用才能使其发挥作用。 SVG本身不会包装文本。

D3中的文字换行

3 个答案: