D3 Zoomable Treemap上的Word Wrap

Question

我在D3中实现了Zoomable Treemap（http://bost.ocks.org/mike/treemap/），但是我已对其进行了修改，因此单击时叶子将转到URL。如果标题太长，它还会添加省略号。

我想在leaf rects上实现自动换行，但无法让它工作。我想在文本中添加一组tspans，但我对执行顺序的挣扎过多，无法理解放在哪里。

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

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

我研究过我要么需要tspans分解它，要么需要内部文本的div但是不知道怎么做。有一些常规D3 Treemap的文本换行示例，但我没有找到Zoomable Treemap，并且代码明显不同。

Answer 1

最简单的方法是用text内的div替换SVG foreignObject元素。为此，您将替换

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

与

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

最好设置width的{​​{1}}和height属性（使用类似于您使用的代码来确定文本是否太长）所以文本正确流动。