D3可缩放树形图上的文字

Question

我在D3中实现可缩放树形图（http://bost.ocks.org/mike/treemap/），但是我已经修改了它，因此叶子反射会在单击时转到URL。如果标题太长，它也会添加省略号。

我想在叶rects上实现换行，但不能让它起作用。我想在文本中添加一组tspans，但是我很难理解执行顺序以了解它的位置。

代码：https://secure.polisci.ohio-state.edu/faq/d3/zoomabletreemap.htm

数据：https://secure.polisci.ohio-state.edu/faq/d3/zoomabletreemap.json

我研究过，我要么需要tspans打破它，或者用里面的文字股利，但不知道该怎么办无论是。有一些常规D3树形图的文本封装的例子，但我没有发现Zoomable Treemap，代码有很大不同。

Answer 1

最容易做的事情可能是用foreignObject内部的div s代替SVG text元素。要做到这一点，你将取代

g.append("text") //was text 
.attr("dy", ".75em") 
... 

与

g.append("foreignObject") 
.attr("dy", ".75em") 
... 
.append("xhtml:div") 
... 

它也可能是可取的设置width和height属性foreignObject（使用代码类似于你使用的是什么，以确定是否文本太长），以便文本正确流动。