Für ein Projekt muss ich das hierarchische Datenlayout einer Visualisierung interaktiv ändern - ohne die zugrunde liegenden Daten zu ändern. Die Layouts, die untereinander wechseln können, sollten Baum, Cluster, Radialbaum und Radialcluster sein. Und Übergang sollte vorzugsweise eine Animation sein.

Ich dachte, das wäre relativ einfachD3. Ich habe angefangen, aber ich habe mich in Übersetzungen und Rotationen, Datenbindungen und Ähnlichem verlaufen, also bitte ich Sie um Hilfe. Wahrscheinlich mache ich auch etwas, das nicht im Sinne von D3 ist, was schlecht ist, da ich nach einer sauberen Lösung suche.

Ich habe einen zusammengestelltjsfidleEs ist jedoch nur ein Ansatzpunkt mit zusätzlichen Optionsfeldern, einer praktischen kleinen Datenmenge und einem anfänglichen Cluster-Layout, um allen zu helfen, die sich das ansehen möchten. Danke im Voraus!

AKTUALISIEREN:

Ich wollte mich nur auf Links konzentrieren, deshalb habe ich andere Elemente vorübergehend deaktiviert. Aufbauend auf der @ AmeliaBR-Methode werden folgende Animationen erhalten:

Hier istjsfiddle aktualisiert.

UPDATE 2:

Jetzt mit Kreisen: (entschuldigen Sie meine Wahl der Farben)

{doom-duba-doom}

Hier istein weiteres aktualisiertes jsfiddle.