d3.js - 可缩放树形图上的 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

最简单的做法可能是用s inside替换 SVGtext元素。为此，您将替换divforeignObject

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

和

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

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