d3js append div

我試圖添加一些彈出消息旁邊的節點，但它看起來像其他任何東西，然後文本SVG和圖像無法顯示附加。d3js append div

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

作品，並將文字，但我嘗試添加一個div和它的不可見的，node.append（「分區」）。有什麼我在這裏失蹤？我怎樣才能輕鬆地獲得節點的位置，以便我可以將屬性轉移到另一個元素。

來源

2012-07-04 BlitzCrank

您不能將SVG中的任何位置的HTML元素放在一個foreignObject元素中，請參閱here。如果您將text元素和foreignObject同時包含在SVG組（g元素）中，並在該元素上設置位置，則它們都應顯示在同一位置，而無需在兩者上設置相同的位置。

來源

2012-07-04 07:54:44

確定這樣的問題是另一件事，我已經有G團，如果我附上我不元素需要設置的位置，所以，我怎麼可以追加一個div？我想稍後修改div的外觀，但它不顯示，它是不可見的 – BlitzCrank

正如我所說的，你需要在'foreignObject'元素中放置HTML元素，比如'div'。您應該能夠稍後使用常規選擇器來選擇和修改其屬性。 –

svg.append（「foreignObject」） .attr（「width」，480） .attr（「height」，500） .append（「xhtml：div」） .style（「font」，「14px」 Helvetica Neue字體「'） html的（ 'ASD'）; – BlitzCrank

或者，你可以在它自己的DIV SVG之外定義的HTML代碼。然後通過類使用追加內容：

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

如本例所示：

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

enter image description here

來源

2013-05-17 15:33:43 jonincanada

這裏是一個很好的教程，只是該方法：http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html – Maggie

回答

相關問題