Question

我在这里看了Mike Bostocks关于嵌套元素的课程：

使用元素嵌套是合乎逻辑的，但由于某种原因，我无法在力导向图中找到任何嵌套示例。例如，为什么不将文本元素嵌套在节点内，因此如果将鼠标悬停在节点上，则会出现文本以响应悬停事件。如果没有嵌套，您必须提出某种机制来将文本元素与节点元素相匹配。实际上，我看到各种方法的奇怪变化，而不是使用嵌套。

简而言之，任何人都可以提供使用嵌套元素的力导向图的示例吗？

Answer 1

重要的是要记住“节点”是一个完全抽象的概念。您可以使用任何类型的元素或整组元素来表示节点。

您可能尝试的一件事是使用g元素来表示您的节点，并使用翻译将它们定位在每个节点上。

这样，在节点进入时，您可以向其添加任意数量的元素，并且它们将保持附加到该节点。例如，您可以附加一个圆形元素和一个文本元素，然后在强制布局运行时，这两个元素将跟随其父g元素。

然后你可以简单地使用css来实现你想要的悬停效果。例如，假设您有节点的g元素，每个节点都有一个.node类，您可以在悬停时显示/隐藏文本，如下所示：

.node text {
  opacity: 0;
}
.node:hover text {
  opacity: 1;
}

HERE是一个非常简单的例子，您可以使用我所描述的技术来实现我认为您所遵循的标记节点类型。希望有所帮助。