0

I'm trying to use the following D3 tree chart, however I'm running into an issue, where if the text is larger than the box/node, it overflows.

I'd like to use this same tree structure, but have the box/node expand with the text, and possibly word wrap at some point. In the fiddle, I you'll see the leftmost node's text is overflowing.

Lengthen any of the name fields in the data, to see what I'm talking about:

var root = {
"name": "flare",

EDIT: I'm trying to support IE9+, it doesn't appear foreignObject is supported in IE9+

Is anyone able to tweak this JSFiddle to do just that? Fiddle

Community
  • 1
  • 1
Tillman32
  • 416
  • 4
  • 9
  • This question has appeared numerous times in different contexts, see e.g. [here](http://stackoverflow.com/questions/11007640/fit-text-into-svg-element-using-d3-js) or [this example](http://bl.ocks.org/milkbread/6571949). – Lars Kotthoff Dec 22 '14 at 23:13
  • @LarsKotthoff Thanks, I was able to get foreignObject working, but then I found out it doesn't support IE9+ – Tillman32 Dec 25 '14 at 19:21

0 Answers0