Add a <div> to a node in SVG with D3

Question

I tried adding some pop-up messages next to the nodes, but it looks like everything except the SVG <text> elements will not be displayed with the addition.

It works:

node.append("text") .attr("dx", 16) .attr("dy", ".0em") .text(function(d) { return d.name }); 

But when I add a div instead of text it is not visible. Is there something I'm missing here? How can I make a div visible?

Also, how can I easily get the position of the node so that I can transfer the positioning attributes to another element.

Answer 1

You cannot put HTML elements in SVG, you need to foreignObject them in a foreignObject element, see here . If you insert both a text element and a foreignObject into an SVG group ( g element) and set the position on this, they should be displayed in the same place without having to set the same position on both.

Answer 2

Alternatively, you can define your html code outside of svg in your own div. Then add content 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