Append <div> to node in SVG with D3
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.
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