it-swarm.com.de

Zoombares Netzwerkdiagramm in AngularJS

Ich möchte einen Netzwerkgraphen in einer AngularJS-Anwendung visualisieren. Die Knoten und Kanten werden als JSON-Objekt gespeichert. Knoten werden später hinzugefügt und geändert (etwa alle 30 Sekunden). Ich möchte die Datenbindung Angular verwenden, um das Diagramm automatisch zu aktualisieren, wenn sich das JSON-Objekt ändert. Der Graph wird 10-1000 Knoten haben. Die Knoten sind rechteckige Textknoten, die jeweils ungefähr einen Satz enthalten. Ich möchte, dass die Grafik zoom- und schwenkbar ist.

Bisher sind mir folgende Optionen bekannt:

Gibt es noch andere relevante Bibliotheken? Was ist die beste Bibliothek für dieses Projekt und wie kann ich eine solche zoombare dynamische Netzwerkgrafik in Anbetracht der Bibliothek implementieren?

23
Andreas

Ich habe in VisJs in eckig experimentiert und es gefällt mir bisher sehr gut. Ihr Netzwerk ist sowohl pannbar als auch zoombar, und Sie können Knoten auswählen. Die Dokumentation war einfach zu befolgen und es gibt viele Beispiele auf ihrer Website ..__ Da die Netzwerke von vis dynamisch aktualisiert werden können, fiel es mir leicht, sie in meine Winkel-App zu integrieren. Zum Beispiel habe ich diese Direktive erstellt:

app.directive('visNetwork', function() {
    return {
        restrict: 'E',
        require: '^ngModel',
        scope: {
            ngModel: '=',
            onSelect: '&',
            options: '='
        },
        link: function($scope, $element, $attrs, ngModel) {
            var network = new vis.Network($element[0], $scope.ngModel, $scope.options || {});

            var onSelect = $scope.onSelect() || function(prop) {};
            network.on('select', function(properties) {
                onSelect(properties);
            });

        }

    }
});

Was ich so in meiner HTML benutze:

<vis-network ng-model="network_data" options="network_options" on-select="onNodeSelect" id="previewNetwork">
</vis-network>

Dann habe ich in meinem Controller folgendes:

    $scope.nodes = new vis.DataSet();
    $scope.edges = new vis.DataSet();
    $scope.network_data = {
        nodes: $scope.nodes,
        edges: $scope.edges
    };
    $scope.network_options = {
        hierarchicalLayout: {
            direction: "UD"
        }

    };

   $scope.onNodeSelect = function(properties) {
        var selected = $scope.task_nodes.get(properties.nodes[0]);
        console.log(selected);
    };

    $scope.nodes.add([
        {id: 1, label: 'Node 1'},
        {id: 2, label: 'Node 2'},
        {id: 3, label: 'Node 3'},
        {id: 4, label: 'Node 4'},
        {id: 5, label: 'Node 5'}]);

    $scope.edges.add([
        {id: 1, from: 1, to: 2},
        {id: 2, from: 3, to: 2}
    ]);
18
efeder

Dies sollte wirklich auf Software Recommendation StackExchange stehen, aber ich kann wegen der Prämie nicht zum Schließen stimmen.

GoJS unterstützt alle Ihre Anforderungen und arbeitet neben Angular ( einfache Demo hier ). (JSON für Modellspeicherung, Datenbindung, Zoom und Schwenkfunktion integriert)

12
Simon Sarris

Es gibt eine gute Demo/Beispiel einer Netzwerkkarte mit Quellcode in D3: http://christophergandrud.github.io/d3Network/ .__ Die Funktionalität ist vorhanden und D3 scheint mit JSON Nice zu spielen. Nach meinen Recherchen ist dies eine gute Wahl für eine Visualisierungsbibliothek. Viele andere Bibliotheken (Graphit usw.) unterstützen dieselbe Funktionalität, sind jedoch schwieriger zu implementieren und sind nicht besonders aktiv.

NVD3 ist eine für AngularJS entwickelte Variante von D3, die auch funktionieren könnte. Die Implementierung von Graphen und Diagrammen in NVD3 ist in AngularJS einfacher als in D3. 

2
Andrew

In einem kommerziellen Kontext sollten Sie yFiles for HTML auch als Bibliothek betrachten, um hochwertige Grafikanzeigen für angetriebene Angular (und AngularJS) -Applikationen bereitzustellen. 

Es handelt sich um eine voll funktionsfähige Anwendung zum Zeichnen und Bearbeiten von Grafiken, die Lösungen für alle Ihre Grafik- und Diagrammanforderungen bietet.

Insbesondere sind 1000 Knoten kein Problem, zumindest wenn dies nicht auf älteren mobilen Endgeräten der unteren Preisklasse liegt. In diesem Fall bieten nur einfache Visualisierungen eine gute Leistung. Aber selbst dann, mit der einzigartigen Hybrid-Rendering-Engine, die alle SVG-, Canvas- und WebGL-Funktionen gleichzeitig in einem Diagramm nutzen kann, sollte dies auch funktionieren.

Bei tausend Knoten mit jeweils einer Textzeile ist es auf Low-End-Geräten problematisch, alle gleichzeitig auf dem Bildschirm anzuzeigen, jedoch hilft auch hier die Virtualisierung.

Es gibt einige live-Online-Demos , die unterschiedliche Stufen der Angular (2+) - und AngularJS-Integrationen zeigen. Wenn Sie jedoch wirklich mit der Bibliothek auf Programmierebene spielen möchten, sollten Sie sie herunterladen und die nicht minifizierte Quellen für diese Demos. Für die Entwicklung von Angular2 + steht ein vollständiger Satz von TypeScript-Bindungen zur Verfügung. Die Beispiele zeigen, wie Sie Winkeldaten an die Diagrammvisualisierung binden und wie Sie optional Winkel für die Erstellung von SVG-Visualisierungen verwenden können. Natürlich enthalten sie auch die Komponente für die Kerngraphvisualisierung Angular.

Offenlegung: Ich arbeite für die Firma, die diese Bibliothek zur Verfügung stellt, vertrete jedoch nicht meinen Arbeitgeber in SO.

0
Sebastian