SVG foreignObject contents do not display unless plain text

Solution 1:

Since you're using d3 you need to tell d3 that the div is a html div and not some element in the svg namespace. Try

.append("xhtml:div")

Solution 2:

<foreignObject> allows embedding all kinds of markup, not just HTML. This means, there must be a way of determining what language is used. That's where namespaces come into play.

To tell SVG what kind of foreignObject you have, you have to put the content in the proper namespace.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <foreignObject x="40" y="40" width="100" height="100">
    <div xmlns="http://www.w3.org/1999/xhtml">test</div>
  </foreignObject>
</svg> 

In your example, the <div> element is in the SVG namespace, i.e. it's an SVG element, not an HTML one (albeit a non-standard one).

The <foreignObject> element also has a requiredExtensions attribute to tell the browser which extension is used, however different browsers seem to be interpreting this attribute differently, so it's probably best to not set it.