Append to node in SVG with D3

Question

I have tried to add some popup messages next to nodes but it looks like anything other than SVG elements won\'t display with append.

This works:

Answer 1

You can't put HTML elements anywhere in an SVG, you need to enclose them in a foreignObject element, see here. If you enclose both the text element and the foreignObject in an SVG group (g element) and set the position on that, they should both show up in the same place without the need to set the same position on both.

Answer 2

Alternatively, you can define your html code outside of svg in its' own div. Then append the contents by class using:

d3.select("#nytg-tooltip").style('top',ypos+"px").style('left',xpos+"px").style('display','block');

As seen in this example:

http://www.nytimes.com/interactive/2012/10/15/us/politics/swing-history.html?_r=0