Wie füge ich einen zusammengesetzten Knoten in einem D3-Force-Layout hinzu?

Das Erstellen eines "zusammengesetzten" Elements ist so einfach wie das Anhängen eines oder mehrerer Kinder an ein anderes Element. In Ihrem Beispiel möchten Sie Ihre Daten an eine Auswahl von <a> -Elementen binden und jedem <a> ein einzelnes <circle> untergeordnetes Element geben.

Zuerst müssen Sie "a.node" anstelle von "circle.node" auswählen. Dies liegt daran, dass Ihre Hyperlinks die übergeordneten Elemente sind. Wenn es kein offensichtliches übergeordnetes Element gibt und Sie nur mehrere Elemente für jedes Datum hinzufügen möchten, verwenden Sie <g> , SVGs Gruppenelement.

Dann möchten Sie jedem Knoten in der Eingabeauswahl ein <a> -Element hinzufügen. Dies erstellt Ihre Hyperlinks. Nachdem Sie die Attribute jedes Hyperlinks festgelegt haben, möchten Sie ihm ein <circle> Kind geben. Ganz einfach: Rufen Sie einfach .append("circle") auf.

Denken Sie daran, dass D3 primär auf Auswahlen von Knoten operiert. Wenn Sie daher .append() für die Eingabe selection aufrufen, bedeutet dies, dass jeder Knoten in der Auswahl ein neues Kind erhält. Mächtiges Zeug!

Noch eine Sache: SVG hat ein eigenes <a> -Element , was ich bezog sich auf oben. Das ist anders als das HTML! Normalerweise verwenden Sie nur SVG-Elemente mit SVG und HTML mit HTML.

Danke an @mbostock, dass ich vorgeschlagen habe, dass ich die Benennung der Variablen verdeutliche.

Antwort an Jason Davies (da stackoverflow die Länge der Antwortkommentare begrenzt ...): Ausgezeichnete Antwort. Sei jedoch vorsichtig mit der Methodenverkettung. Normalerweise möchten Sie node auf das äußere Ankerelement und nicht auf das innere Kreiselement verweisen. Daher würde ich eine kleine Variante empfehlen:

Ich habe auch die cx- und cy-Attribute des Kreises durch eine Transformation auf dem umgebenden Ankerelement ersetzt. entweder wird einer arbeiten. Sie können Svg: a-Elemente als svg: g behandeln (beides sind Container), was sehr praktisch ist, wenn Sie später Labels hinzufügen möchten.