你如何在一個D3指向力圖中使用嵌套元素？

Question

我看了一下邁克Bostocks課就到這裏嵌套元素：

http://bost.ocks.org/mike/nest/

這是合乎邏輯的使用元素嵌套，但由於某些原因，我無法找到有效的任何嵌套的例子有向圖。例如，爲什麼不在節點中嵌套文本元素，因此如果將鼠標懸停在節點上，文本將出現以響應懸停事件。如果沒有嵌套，你必須想出一些機制來將文本元素與節點元素進行匹配。事實上，我看到各種各樣的方法來做到這一點，而不是使用嵌套。

總之，任何人都可以提供一個使用嵌套元素的有向圖的例子嗎？

Answer 1

請務必記住，「節點」是一個完全抽象的概念。您可以使用任何類型的元素或整組元素來表示節點。

您可能會嘗試的一件事是使用g元素來表示您的節點，並使用翻譯將它們定位在每個滴答。

通過這種方式，在節點進入後，您可以爲其添加任意數量的元素，並且它們將保持連接到該節點。例如，您可以附加一個圓形元素和一個文本元素，然後這兩個元素將在力佈局運行時跟隨它們的父元素g。

然後你可以簡單地使用CSS來實現你想要的懸停效果。例如，假設你已經爲節點g元素，每一個都具有一流的.node，你可以將鼠標懸停顯示/隱藏文本，如下所示：

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

HERE是一個很簡單的例子，你可以按照實現的那種使用我所描述的技術，我認爲您已經過了標記的節點。希望有所幫助。