AngularJS에서 확대/축소 가능한 네트워크 그래프

AngularJS에서 확대/축소 가능한 네트워크 그래프

Angular로 네트워크 그래프를 시각화합니다.JS application.노드와 에지는 JSON 객체로 저장되며 노드는 나중에 추가 및 수정됩니다(예: 30초마다 한 번씩).JSON 객체가 변경되면 Angular data binding을 사용하여 그래프를 자동으로 업데이트하고 싶습니다.그래프에는 10-1000개의 노드가 있습니다.노드는 각각 약 한 문장을 포함하는 직사각형 텍스트 노드가 될 것입니다.저는 그 그래프가 줌과 이동이 가능했으면 좋겠습니다.

저는 지금까지 다음 옵션에 대해 알고 있습니다.

• ArborJS

  (각도 )를할 수 ParticleSystem.merge하지만 Arbor는 줌 가능한 동작을 지원하지 않는 것으로 보이며, 잘 지원되지 않는 것으로 보입니다.예를 들어, 단일 노드 버그는 여전히 해결되지 않습니다.

• D3

  줌이 가능한 힘 레이아웃 데모가 있으며, 다양한 장소에서 Angular와 함께 d3 사용에 대한 정보를 제공합니다.D3는 잘 지원되지만 아래 옵션보다 낮은 수준으로 보입니다.예를 들어, 보기 좋은 직사각형 노드 레이블로 네트워크 그래프를 만드는 것은 사소한 일이 아닌 것 같습니다.

• VisJS

  VisJS는 줌이 가능한 네트워크 그래프를 지원하며 진행 중인 Angular 라이브러리가 있지만 VisJS와 Angular 라이브러리 모두 얼마나 신뢰할 수 있는지 모르겠습니다.

• 시그마JS

  시그마JS는 줌이 가능한 네트워크 그래프도 지원하지만, 앵귤러로 잘 작동하는지는 모르겠습니다.

• 세포스케이프JS

• kmap

다른 관련 도서관이 있습니까?이 프로젝트에 사용하기에 가장 좋은 라이브러리는 무엇이며, 라이브러리가 주어진 상태에서 어떻게 이렇게 줌이 가능한 동적 네트워크 그래프를 구현할 수 있습니까?

VisJ를 각도별로 실험해봤는데, 지금까지 정말 마음에 듭니다.이들의 네트워크는 이동 및 확대/축소가 가능하며 노드를 선택할 수 있습니다.설명서는 쉽게 따라 할 수 있었고 사이트에는 많은 예시가 있습니다.vis의 네트워크는 동적으로 업데이트할 수 있기 때문에, 저는 그것을 제 각도의 앱에 통합하는 것이 쉽다는 것을 알았습니다.예를 들어 다음과 같은 지침을 만들었습니다.

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

이것은 정말로 소프트웨어 추천 스택 익스체인지에 있어야 하지만 현상금 때문에 마감에 투표할 수 없습니다.

GoJS는 모든 요구사항을 지원하며 Angular와 함께 작동합니다(여기 간단한 데모).(모델 스토리지용 JSON, 데이터 바인딩, 줌 및 팬 내장)

D3에 소스 코드가 있는 네트워크 맵의 데모/example이 잘 되어 있습니다. http://christophergandrud.github.io/d3Network/ 기능이 모두 갖추어져 있으며, D3는 JSON과 잘 어울리는 것 같습니다.제가 조사한 바로는, 이것은 시각화 라이브러리를 위한 강력한 선택입니다.다른 많은 라이브러리(그래파이트 등)도 동일한 기능을 지원하지만 구현하기가 더 어렵고 활성도가 높지 않습니다.

NVD3는 각도를 위해 설계된 D3의 변형입니다.JS도 가능합니다.NVD3 내에서 그래프와 차트를 구현하는 것이 Angular에서 더 쉽습니다.D3보다 JS가.

상업적인 맥락에서 당신은 고품질 그래프 시각화를 Angular(및 Angular)로 가져오기 위한 라이브러리로서 HTML용 yFiles도 고려해야 합니다.JS) 파워 앱.

모든 그래프 그리기 및 편집 소프트웨어 라이브러리로 모든 그래핑 및 다이어그램 작성에 필요한 솔루션을 제공합니다.

특히 1,000개의 노드는 문제가 되지 않습니다. 적어도 이 노드가 저사양의 구형 모바일 장치에 없는 경우에는 단순한 시각화만으로 우수한 성능을 제공할 수 있습니다.그러나 그 때에도 SVG, Canvas 및 WebGL을 모두 동시에 다이어그램으로 활용할 수 있는 고유한 하이브리드 렌더링 엔진을 사용할 수 있습니다.

각 텍스트 라인이 하나씩 있는 수천 개의 노드의 경우, 로우엔드 장치에서 모든 노드를 동시에 화면에 표시하는 것은 문제가 있지만, 가상화도 여기에 도움이 됩니다.

Angular(2+)와 Angular의 다른 수준을 보여주는 온라인 라이브 데모가 있습니다.JS 통합이지만 프로그래밍 수준에서 라이브러리와 함께 플레이하고 싶다면 다운로드하여 해당 데모에 대한 비미니 소스를 확인해야 합니다.Angular2+ 개발의 경우 TypeScript 바인딩의 전체 세트를 사용할 수 있으며 샘플은 각 데이터를 그래프 시각화에 바인딩하는 방법과 SVG 시각화 템플릿에 각도를 선택적으로 사용하는 방법을 보여줍니다.물론 여기에는 핵심 그래프 시각화 각도 성분도 포함됩니다.

^{공개:저는 그 도서관을 제공하는 회사에서 일하지만 SO의 고용주를 대표하지는 않습니다.}

언급URL : https://stackoverflow.com/questions/24396708/zoomable-network-graph-in-angularjs