使用 D3 将 <div> 附加到 SVG 中的节点答案

【问题标题】：Append <div> to node in SVG with D3使用 D3 将 <div> 附加到 SVG 中的节点
【发布时间】：2012-07-04 05:05:54
【问题描述】：

我尝试在节点旁边添加一些弹出消息，但看起来除了 SVG 元素之外的任何其他元素都不会通过 append 显示。

这行得通：

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

但是当我附加 div 而不是 text 时，它是不可见的。我在这里缺少什么吗？如何使 div 可见？

另外，我怎样才能轻松获得节点的位置，以便将定位属性转移到另一个元素。

【问题讨论】：

标签： d3.js

【解决方案1】：

您不能将 HTML 元素放在 SVG 中的任何位置，您需要将它们包含在 foreignObject 元素中，请参阅 here。如果您将 text 元素和 foreignObject 都包含在一个 SVG 组（g 元素）中并在其上设置位置，则它们应该都显示在同一个位置，而无需在两者上设置相同的位置.

【讨论】：

好的，所以问题是另一回事，我已经有了 g 组，如果我添加元素，我不需要设置位置，那么如何添加 div？我想稍后修改 div 的外观，但它不显示，它是不可见的
正如我所说，您需要将 HTML 元素（例如 div）放入 foreignObject 元素中。您应该能够稍后使用普通选择器选择和修改其属性。
svg.append("foreignObject") .attr("width", 480) .attr("height", 500) .append("xhtml:div") .style("font", "14px 'Helvetica Neue'") .html('asd');
链接引用了一个完全错误的页面 - （基本的 HTML 用法，而不是 d3 / SVG）

【解决方案2】：

或者，您可以在 svg 之外在其自己的 div 中定义您的 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

【讨论】：

这里有一个很好的教程来说明这个方法：d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html