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 附加到它，然后附加 xhtml 元素，例如 div，如下面的代码所示。

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