{"id":703,"date":"2013-08-15T18:41:19","date_gmt":"2013-08-15T18:41:19","guid":{"rendered":"http:\/\/billdwhite.com\/?p=703"},"modified":"2013-08-15T18:41:19","modified_gmt":"2013-08-15T18:41:19","slug":"d3-treemap-label-truncation","status":"publish","type":"post","link":"https:\/\/billdwhite.com\/wordpress\/2013\/08\/15\/d3-treemap-label-truncation\/","title":{"rendered":"d3 Treemap Label Truncation"},"content":{"rendered":"

I received a comment asking how to truncate labels in my treemap example. Here is a quick example showing how I handled it on a recent project. I am sure there are other ways to do this and if anyone has a better alternative, please detail it in the comments. Basically, when using labels in D3, I find it easier to work with HTML DIVs rather than the SVG Text nodes. So, using the ForeignObject element within the SVG, I add a DIV containing the label and I can control the wrapping, truncation, etc using styling. Internet Explorer, as usual, is years behind the other modern browsers so you have to “speak slowly” when IE is detected and dumb things down a bit so it can keep up. I basically have a little function that determines the length of the label text and if it exceeds the width of the treemap rectangle, I truncate it manually. See the Gist<\/a> for the code and see the demo below. (Keep in mind that I have not taken the time to deal with the parent group labels so you will see some over lap from those)
\nNOTE: The labels do not show up in IE10 even though they work in IE9. Big surprise. Maybe one day Microsoft will make a browser that works. I’m sure I could dig around and figure out why IE cannot handle these simple labels but until then, just pretend.
\n

<\/p>\n