D3中的文字環繞

Question

我一直在研究一段關於文字環繞的問題，但是其中很多都涉及到使用css來文字環繞？

有沒有我可以使用D3爲文本換行是這樣的任何方式：

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

Answer 1

您需要使用svg:foreignObject與HTML div或類似的，使這項工作。 SVG本身不會包裝文本。

Answer 2

我認爲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 3

其他的答案建議使用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，一個只添加文字換行的插件。