Einfachste Art der Integration von Angular-created Elementen mit D3

Ich spiele mit verschiedenen Möglichkeiten der Integration von D3 und Angular im Zusammenhang mit dem Lernen dieser beiden Frameworks herum und hoffe auf etwas Input:

Meine Client-Anwendung empfängt ein JSON-Array von Knoten und ein Array von Kanten von meinem Server. Die zentrale Komponente des Clients ist eine Graphik-Visualisierung, die als kraftgesteuertes D3-Layout implementiert wird: Für jeden Knoten im Knoten-Array wird ein (SVG) -Kreiselement zu dieser Visualisierung hinzugefügt, und Linien zwischen diesen Kreisen werden für jede Kante in hinzugefügt das Kanten-Array.

Natürlich macht D3's selection.data( ) es trivial, diese Elemente hinzuzufügen und sie jeweils an die Daten zu binden, aber die Graph-Visualisierung ist nur ein Teil einer viel größeren Anwendung: Ich muss verschiedene Arten von Elementen erstellen, die diese repräsentieren Knoten und Kanten in verschiedenen Teilen der Anwendung (mit der D3 nichts zu tun hat), und ich möchte alle diese Elemente an einen einzigen Datensatz gebunden halten.

Mein wichtigstes Ziel ist die Minimierung der Code-Komplexität. Obwohl ich mich in die Einfachheit und Eleganz der Data-Binding-Funktionalität von D3 verliebt habe, bin ich zu der vorläufigen Schlussfolgerung gelangt, dass es in einem Teil der Anwendung verwendet wird Wenn Sie Angular verwenden, um in anderen Teilen dasselbe zu tun, wird unnötige Komplexität erzeugt, und der einfachste Ansatz wäre die Verwendung von Angular für die Datenbindung / Elementerstellung.

Mit anderen Worten, anstatt selection.data( ).enter( ).append( ) zu verwenden, um SVG-Elemente zu erstellen, denke ich, dass ich dies mit ng-repeat="node in nodes" tun sollte, indem ich vielleicht jede als benutzerdefinierte Direktive erstelle, um benutzerdefinierte Funktionalität zu ermöglichen. Nachdem ich dies getan habe, müsste ich diese Elemente dann in "D3" bringen, d. H. Durch sein kraftgesteuertes Layout verwaltet werden.

Klingt meine Argumentation hier? Ich bin insbesondere besorgt, dass ich Komplikationen übersehen würde, die dies im Hinblick auf die Objektkonstanz verursacht, was eine wichtige Voraussetzung ist, wenn Knoten eintreten, aussteigen und ständig über den Bildschirm zu bewegen, und ich brauche diese Übergänge, um glatt zu sein. Wie empfehlen Sie, dass ich meine eckigen Elemente in D3 integriere (genauer gesagt in meine force.nodes{ } und force.links( ) Arrays), um solche Komplikationen zu vermeiden?

Schließlich denke ich auch über eine Strategie nach, von der ich hoffe, dass sie mir das Beste aus beiden Welten geben könnte: Ich könnte D3 verwenden, um meine SVG-Elemente zu erstellen und sie an ihr jeweiliges Datum zu binden, anstatt diesen Code auszuführen Die Funktion link der Visualisierungs-Direktive (wie ich es getan habe, und wie alle von mir gefundenen Angular / D3-Tutorials), könnte ich sie in der Funktion compile ausführen und so etwas tun:

Dabei ist node-icon der normalisierte Name einer Direktive mit einer restrict -Eigenschaft, die C enthält. Wenn dies in der Kompiliermethode ausgeführt wird, sollte angle alle diese Direktiven als normal kompilieren und zusätzliche Funktionalität / Schnittstellen mit anderen Direktiven (usw.) hinzufügen, genau wie mit jedem anderen Elementtyp. Richtig?

Das ist die Option, die mich intuitiv am meisten interessiert - gibt es irgendwelche Fallstricke, die ich übersehen könnte, was die frühere Strategie vielleicht besser machen könnte?