web-dev-qa-db-ja.com

AngularJSのズーム可能なネットワークグラフ

AngularJSアプリケーションでネットワークグラフを視覚化したいと思います。ノードとエッジはJSONオブジェクトとして保存され、ノードは後で（たとえば30秒ごとに）追加および変更されます。 JSONオブジェクトが変更されると、グラフを自動的に更新するためにAngularデータバインディングを使用します。グラフには10〜1000個のノードがあります。ノードはそれぞれ約1文を含む長方形のテキストノードです。グラフをズームおよびパン可能にしたい.

これまでのところ、次のオプションについて知っています。

他に関連するライブラリはありますか？このプロジェクトに使用するのに最適なライブラリは何ですか？また、ライブラリを指定してこのようなズーム可能な動的ネットワークグラフを実装するにはどうすればよいですか？

javascriptangularjsgraphd3.jssigma.js
23
Andreas

私はVisJで角度をつけて実験してきましたが、今のところ本当に気に入っています。ネットワークはパンとズームの両方が可能で、ノードを選択できます。ドキュメントは簡単にフォローでき、サイトには多くの例があります。 visのネットワークは動的に更新できるため、angular app。に簡単に統合できます。たとえば、次のディレクティブを作成しました。

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

        }

    }
});

私は私のHTMLで次のように使用しています：

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

その後、私のコントローラーには次のものがあります：

    $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

これは本当に Software Recommendation StackExchangeにあるはずですが、賞金のために私は終了に投票することはできません。

GoJS はすべての要件をサポートし、Angular=（ 簡単なデモはこちら ）。（モデルストレージ、データバインディング、ズームのJSON）およびパン内蔵）

12
Simon Sarris

D3にソースコードを含むネットワークマップの良いデモ/例があります： http://christophergandrud.github.io/d3Network/ 機能はすべてですそこに、D3はJSONでNiceをプレイしているようです。私の研究から、これは視覚化ライブラリの強力な選択です。他の多くのライブラリ（グラファイトなど）も同じ機能をサポートしていますが、実装が難しく、あまりアクティブではありません。

NVD3は、AngularJS用に設計されたD3のバリエーションであり、動作することもあります。 NVD3内からグラフとチャートを実装するのは、D3よりもAngularJSの方が簡単です。

2
Andrew

商用のコンテキストでは、 yFiles for HTML を、高品質のグラフ視覚化をAngular（およびAngularJS）のパワードアプリにもたらすためのライブラリとして）を考慮する必要もあります。

グラフ作成およびダイアグラム作成のすべてのニーズにソリューションを提供する、フル機能のグラフ描画および編集アプリケーションです。

具体的には、少なくともこれがローエンドの古いモバイルデバイス上にない場合、1000ノードは問題ではありません。この場合、単純な視覚化のみが良好なパフォーマンスを提供します。ただし、その場合でも、SVG、Canvas、およびWebGLのすべてを同時にダイアグラム内で活用できる独自のハイブリッドレンダリングエンジンを使用すると、機能するはずです。

ローエンドのデバイスでは、テキストが1行ずつある1000個のノードの場合、すべてのノードを同時に画面に表示するのは問題になりますが、ここでも仮想化が役立ちます。

いくつかの ライブ、オンラインデモ があり、異なるレベルのAngular（2+）とAngularJSの統合が表示されますが、プログラミングレベルでライブラリを実際にプレイしたい場合は、ダウンロードしてチェックアウトする必要がありますこれらのデモの縮小されていないソース。 Angular2 +開発では、TypeScriptバインディングの完全なセットを利用できます。サンプルでは、​​角度データをグラフ視覚化にバインドする方法と、オプションでangularをSVG視覚化のテンプレートに使用する方法を示します。もちろん、コアグラフの視覚化Angularコンポーネント。

開示：私はそのライブラリを提供する会社で働いていますが、SOの雇用主を代表していません。

0
Sebastian