Visualize network topology with AngularJS + D3

[lousek1992]

Hello everybody,

I try to create an editable visulization of a network topology with D3 and AngularJS.
I roughly achieved what I'd like to have with D3 only - my topology consists of <image> (nodes) and <line> (links) elements, with different mouse and key actions (drag&drop, ctrl / alt / delete key, etc.) attached to edit the topology.
But currently my topology (nodes & links) resp. data model is basically included in the D3 logic ...

I'd like to use AngularJS 2-way bindings to link some attributes of the nodes and links to a controller where the model and logic resides, e.g. for when x and y is modified (on "dragend" or ng-change after a drag&drop action) to update the model and notify a backend (REST API) via the controller, or to update the view when e.g. the status of the model (let's say the icon) changes.

I read some posts on combining AngularJS and D3 (e.g. http://www.ng-newsletter.com/posts/d3-on-angular.html or http://briantford.com/blog/angular-d3).
But they only deal with a simple array of values, and not with arrays of objects / multiple objects.
I tried to create my own directive and implement the D3 logic in the "link" function. Or do I need to create individual directives for my topology (<svg>) as well as nodes (<image>) and links (<line>) to encapsulate the logic (e.g. drag&drop) of each of them?

In fact, I am quite lost how to achieve this (if this makes any sense at all), so I would be very glad for any tips and hints on this.

Btw: I currently use AngularJS v1 as I am a bit familiar with it but not yet with v2.
I am also quite new to D3.

Any help is greatly appreciated!

KR,
Lukas