web-dev-qa-db-fra.com

Graphique réseau zoomable dans AngularJS

Je souhaite visualiser un graphe de réseau dans une application AngularJS. Les nœuds et les bords sont stockés en tant qu'objet JSON. Les nœuds seront ajoutés et modifiés ultérieurement (par exemple toutes les 30 secondes). Je souhaite utiliser la liaison de données angulaire pour mettre à jour automatiquement le graphique lorsque l'objet JSON change. Le graphique aura 10-1000 nœuds. Les nœuds seront des nœuds de texte rectangulaires contenant environ une phrase chacun. Je voudrais que le graphique soit zoomable et panoramique.

Je connais les options suivantes jusqu'à présent:

Existe-t-il d'autres bibliothèques pertinentes? Quelle est la meilleure bibliothèque à utiliser pour ce projet et comment puis-je implémenter un tel graphe de réseau dynamique zoomable étant donné la bibliothèque?

javascriptangularjsgraphd3.jssigma.js
23
Andreas

J'ai expérimenté dans VisJs en angular, et j'aime vraiment ça jusqu'à présent. Leur réseau est à la fois réparable et zoomable, et vous pouvez sélectionner des nœuds. La documentation a été facile à suivre et il y a beaucoup d'exemples sur leur site . Puisque les réseaux de vis peuvent être mis à jour de manière dynamique, j'ai trouvé facile de l'intégrer dans mon application angular. Par exemple, j'ai créé cette directive:

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);
            });

        }

    }
});

Ce que j'utilise dans mon HTML comme ceci:

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

Ensuite, dans mon contrôleur, j'ai les éléments suivants:

    $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

Cela devrait vraiment être sur Recommandation du logiciel StackExchange mais je ne peux pas voter pour fermer à cause de la prime.

GoJS répond à toutes vos exigences et fonctionne aux côtés de Angular ( démo simple ici ). (JSON pour le stockage de modèles, la liaison de données, le zoom et le panoramique intégrés)

12
Simon Sarris

Il existe une bonne démo/exemple d’une carte réseau avec code source dans D3: http://christophergandrud.github.io/d3Network/ La fonctionnalité est tout ce qu’elle est, et D3 semble jouer à Nice avec JSON. D'après mes recherches, c'est un choix judicieux pour une bibliothèque de visualisation. De nombreuses autres bibliothèques (graphite, etc.) prennent également en charge les mêmes fonctionnalités mais sont plus difficiles à implémenter et ne sont pas extrêmement actives.

NVD3 est une variante de D3 conçue pour AngularJS et qui pourrait également fonctionner. Implémenter des graphiques et des graphiques à partir de NVD3 est plus facile dans AngularJS que D3. 

2
Andrew

Dans un contexte commercial, vous devez également considérer yFiles for HTML comme une bibliothèque permettant d’afficher des graphiques de haute qualité dans des applications alimentées par Angular (et AngularJS). 

C'est une application de dessin et d'édition de graphiques complète qui fournit des solutions à tous vos besoins en matière de graphisme et de création de diagrammes.

Plus précisément, 1 000 nœuds ne posent pas de problème, du moins s'il ne s'agit pas d'appareils mobiles bas de gamme plus anciens, auquel cas seules des visualisations simples donneront de bonnes performances. Mais même dans ce cas, avec le moteur de rendu hybride unique qui peut exploiter simultanément SVG, Canvas et WebGL dans un diagramme, même si cela devrait fonctionner.

Pour un millier de nœuds comportant chacun une ligne de texte, sur les appareils bas de gamme, il sera problématique de les afficher tous à l'écran en même temps, mais la virtualisation est également utile ici.

Il existe certaines versions live, en ligne qui montrent différents niveaux d’intégrations Angular (2+) et AngularJS, mais si vous voulez vraiment jouer avec la bibliothèque au niveau de la programmation, vous devez la télécharger et consulter le fichier non-intégré. sources minifiées pour ces démos. Pour le développement Angular2 +, un ensemble complet de liaisons TypeScript est disponible et les exemples montrent comment lier des données angulaires à la visualisation de graphes, ainsi que l'utilisation facultative d'angular pour la modélisation des visualisations SVG. Bien sûr, ils incluent également la visualisation graphique de base Composant angulaire.

Divulgation: Je travaille pour la société qui fournit cette bibliothèque, mais je ne représente pas mon employeur sur SO.

0
Sebastian