d3.js - 附加
在 SVG 中使用 D3 节点

Question

我试图在节点旁边添加一些弹出消息，但看起来除了 SVG <text> 元素之外的任何内容都不会显示附加。

这有效：

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

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

另外，如何轻松获取节点的位置，以便将定位属性转移到另一个元素。

score 5 · Accepted Answer

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

score 4 · Accepted Answer

或者，您可以在自己的 div 中定义 svg 之外的 html 代码。然后使用以下内容按类附加内容：

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

如本例所示：

在此处输入图像描述

d3.js - 附加在 SVG 中使用 D3 节点