D3 Zoomable Treemap上的Word Wrap

Question

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

我想在叶子上实现自动换行,但不能让它起作用.我想在文本中添加一组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用divs里面替换SVG 元素foreignObject.要做到这一点,你会替换

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

同

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

也可以建议设置(width和使用类似于您正在使用的代码来确定文本是否太长)的和height属性,foreignObject以便文本正确流动.