Question

I am implementing the Zoomable Treemap in D3 (http://bost.ocks.org/mike/treemap/), however I have modified it so the leaf rects will go to URLs when clicked. It also adds an ellipsis if the title is too long.

I’d like to implement word wrapping on leaf rects instead but cannot get it to work. I wanted to add a set of tspans to the text but am struggling with the execution order too much to understand where to put it.

Code: https://secure.polisci.ohio-state.edu/faq/d3/zoomabletreemap.htm

Data: https://secure.polisci.ohio-state.edu/faq/d3/zoomabletreemap.json

I’ve researched that I either need tspans breaking it up or a div with the text inside but don’t know how to do either. There are examples of text wrap for the regular D3 Treemap but I’ve found none for the Zoomable Treemap and the code is significantly different.

Answer 1

The easiest thing to do is probably to replace the SVG text elements with divs inside foreignObject. To do that, you would replace

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

with

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

It might also be advisable to set the width and height attributes of the foreignObject (using code similar to what you’re using to determine whether the text is too long) so that the text flows correctly.