可缩放树形图上的 D3 自动换行

Question

我在 D3 (http://bost.ocks.org/mike/treemap/) 中实现了可缩放的树形图，但是我已经对其进行了修改，以便在单击时叶矩形将转到 URL。如果标题太长，它还会添加省略号。

我想在叶子矩形上实现自动换行，但不能让它工作。我想在文本中添加一组 tspan，但我在执行顺序上苦苦挣扎，以至于无法理解将其放在哪里。

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

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

我研究过我要么需要 tspan 将其分解，要么需要一个包含文本的 div，但我也不知道该怎么做。有常规 D3 Treemap 的文本换行示例，但我没有发现 Zoomable Treemap 的示例，并且代码明显不同。

Answer 1

最简单的做法可能是将 SVG text 元素替换为 divs 内的 foreignObject。为此，您将替换

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

与

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

还建议设置foreignObject 的width 和height 属性（使用类似于您用来确定文本是否太长的代码）以使文本正确流动。