Масштабируемый сетевой график в AngularJS

Я хотел бы визуализировать сетевой граф в приложении AngularJS. Узлы и ребра сохраняются как объект JSON, а узлы будут добавлены и изменены позже (скажем, каждые 30 секунд). Я хочу использовать привязку данных Angular для автоматического обновления графика при изменении объекта JSON. График будет иметь 10-1000 узлов. Узлы будут прямоугольными текстовыми узлами, содержащими около предложения каждый. Я хотел бы, чтобы график был масштабируемым и панорамным.

Я знаю о следующих вариантах:

ArborJS

Легко выполнить динамическое обновление с помощью Angular (используя ParticleSystem.merge). Тем не менее, Arbor, похоже, не поддерживает масштабируемое поведение, и, похоже, он не поддерживается хорошо. Например, ошибка single- node еще не решена.
D3

Существует демонстрационная версия с масштабируемым силовым механизмом, а в разных местах есть информация об использовании d3 с Angular. D3 хорошо поддерживается, но он выглядит ниже, чем ниже. Например, создание сетевого графика с красивыми прямоугольными метками node кажется нетривиальным.
VisJS

VisJS поддерживает масштабируемые сетевые графики, а незавершенная Angular библиотека, но я не знаю, насколько надежны как VisJS, так и его Angular.
SigmaJS

SigmaJS также поддерживает масштабируемые сетевые графики, но я не знаю, хорошо ли он играет с Angular.
CytoscapeJS
kmap

Существуют ли другие соответствующие библиотеки? Какая лучшая библиотека используется для этого проекта и как я могу реализовать такой масштабируемый динамический сетевой график, учитывая библиотеку?

Ответ 1

Я экспериментировал в VisJs в angular, и мне это очень нравится. Их сеть одновременно настраивается и масштабируется, и вы можете выбирать узлы. Документацию легко отслеживать, и на их сайте представлено множество примеров. Поскольку виртуальные сети могут динамически обновляться, мне было легко интегрировать их в мое приложение angular. Например, я создал эту директиву:

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

Ответ 2

Это действительно должно быть на Рекомендации по использованию программного обеспечения StackExchange, но я не могу проголосовать за закрытие из-за щедрости.

GoJS поддерживает все ваши требования и работает рядом с Angular (простая демонстрация здесь). (JSON для хранения модели, привязки данных, масштабирования и панорамирования)

Ответ 3

Существует хорошая демонстрация/пример сетевой карты с исходным кодом в D3: http://christophergandrud.github.io/d3Network/ Функциональность там есть, и D3, похоже, хорошо играет с JSON. Из моих исследований это отличный выбор для библиотеки визуализации. Многие другие библиотеки (графит и т.д.) Также поддерживают одну и ту же функциональность, но сложнее реализовать и не очень активны.

NVD3 - это вариация D3, разработанная для AngularJS, которая также может работать. Внедрение графиков и диаграмм из NVD3 в AngularJS проще, чем D3.