ProgrammingFrontendAngular

[Angular] Cytoscape 사용 방법

,

Cytoscape 소개

Cytoscape은 점 (node)과 선 (edge)으로 이루어진 네트워크의 가시화, 통합, 분석을 가능하게 하는 프리 오픈소스 소프트웨어입니다. 자바로 구현되어 있어 윈도우, 맥, 리눅스등에서 자유롭게 구동합니다.

Cytoscape 라이브러리를 사용하여 노드 간의 절차를 시각화하는 그래프를 구현하는 방법에 대해 알아보겠습니다.

설치

cytoscape 패키지를 설치합니다.

1
$ npm install --save cytoscape cytoscape-klay

TypeScript 사용 시 추가로 설치합니다.

1
$ npm install --save-dev @types/cytoscape

설정

angular.json 파일에서 다음의 내용을 추가합니다.

1
"scripts": ["./node_modules/cytoscape/dist/cytoscape.min.js"],

예제

app.component.html

1
<div id="cy"></div>

그래프의 스타일을 정의합니다.

app.component.scss

1
2
3
4
5
#cy {
  height: 300px;
  width: 100%;
  display: block;
}

cytoscape 패키지를 import 합니다. 기본적으로 container, elements, style 및 layout 옵션을 설정합니다. 노드 간의 연결을 시각화 하기 위해 layout 에 klay를 정의합니다.

app.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import { Component, OnInit } from '@angular/core';

import cytoscape from 'cytoscape';
import klay from 'cytoscape-klay';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  /**
   * constructor
   */
  constructor() {}

  /**
   * ngOnInit
   */
  ngOnInit(): void {
    cytoscape.use(klay);

    const cy = cytoscape({
      container: document.getElementById('cy'), // container to render in

      elements: [
        // node
        { data: { id: 'step1', name: 'step1' } },
        { data: { id: 'step2', name: 'step2' } },
        { data: { id: 'step3', name: 'step3' } },
        { data: { id: 'step4', name: 'step4' } },
        // edge
        { data: { id: '1', source: 'step1', target: 'step2' } },
        { data: { id: '2', source: 'step1', target: 'step3' } },
        { data: { id: '3', source: 'step2', target: 'step4' } },
        { data: { id: '4', source: 'step3', target: 'step4' } },
      ],

      style: [
        // the stylesheet for the graph
        {
          selector: 'node',
          style: {
            content: 'data(name)',
            shape: 'rectangle',
            'text-wrap': 'wrap',
            'text-halign': 'center',
            'text-valign': 'center',
            'background-color': '#6FB1FC',
            width: '40px',
            height: '40px',
            color: 'black',
            'font-size': '10px',
          },
        },
        {
          selector: 'edge',
          style: {
            'curve-style': 'bezier',
            'line-color': '#000000',
            'target-arrow-shape': 'triangle',
            'target-arrow-fill': 'filled',
            'target-arrow-color': '#000000',
            width: '1px',
            'line-style': 'solid',
            opacity: 0.666,
          },
        },
      ],
      layout: {
        name: 'klay',
      },
    });

    const options = {
      name: 'klay',
      nodeDimensionsIncludeLabels: true,
      klay: {
        borderSpacing: 100,
        fixedAlignment: 'BALANCED',
        edgeRouting: 'POLYLINE',
        edgeSpacingFactor: 10,
        inLayerSpacingFactor: 2.0,
        layoutHierarchy: true,
        linearSegmentsDeflectionDampening: 3.0,
        spacing: 30,
        mergeEdges: false,
      },
    };

    cy.layout(options).run();
  }
}

아래 참고 사이트에서 예제 및 옵션 설정에 대해 자세하게 설명이 되어있습니다. 참고하여 구현하시면 됩니다.

참고

Share