d3js append div

问题:

I tried to add some popup messages next to the node but it looks like anything else then text svg and image cant be displayed with append.

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

works and adds the text but i tried to add a div and its not visible, node.append("div"). Is there something i am missing here? also how can i easly get the position of node so i can transfer the attributes to another element.

回答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.

回答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

文章来源: d3js append div