CODEWITHSUNDEEP
d3.js
BlitzCrank
BlitzCrank

Reputation: 413

Append <div> to node in SVG with D3

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

This works:

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

But when I append a div instead of text it is not visible. Is there something I am missing here? How can I make the div visible?

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

Upvotes: 6

Views: 17370

Answers (2)

jonincanada
jonincanada

Reputation: 417

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

enter image description here

Upvotes: 4

Lars Kotthoff
Lars Kotthoff

Reputation: 109282

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.

Upvotes: 5

Related Questions