d3.js - 使用 D3 将 <div> 附加到 SVG 中的节点

Question

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

这有效:

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

但是当我附加一个 div而不是 text它是不可见的。有什么我在这里想念的吗？如何使div可见？

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

Answer 1

您不能将 HTML 元素放在 SVG 中的任何位置，您需要将它们括在 foreignObject 中。元素，见 here .如果同时附上 text元素和 foreignObject在 SVG 组( g 元素)中设置位置，它们应该都显示在同一个位置，而无需在两者上设置相同的位置。