Question

Check out my jsbin here

I would like some wrapping text. Following the recommendation from this post I created a foreignObject and appended it with a ‘p’ element.

My text does not show up at all.

Now, when I do the EXACT SAME thing in markup it shows (I just take the generated svg code and plop it into the svg body).

Heck, if I right go to devtools, right click on the svg, choose “edit as html” and insert a new line before the </svg> closing brace, my text shows up.

What gives?

Answer 1

Replace

 .append('p')
    .attr('xmlns', 'http://www.w3.org/1999/xhtml')

with

.append('xhtml:p')

Namespaces are special things when creating nodes in javascript and can’t be treated as attributes. d3 uses the above syntax to cope with that.