附加< div>到带有D3的SVG中的节点

问题描述

我试图在节点旁边添加一些弹出消息，但是除了SVG< text>元素将不会显示带有追加.

I have tried to add some popup messages next to nodes but it looks like anything other than SVG <text> elements won't display with append.

这有效:

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

但是当我附加一个div而不是text时，它是不可见的.这里有我想念的东西吗?如何使div可见?

But when I append a div instead of text it is not visible. Is there something I am missing here? How can I make the div visible?

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

Also how can I easily get the position of node so i can transfer the positioning attributes to another element.

推荐答案

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

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.

这篇关于附加&lt; div&gt;到带有D3的SVG中的节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！