[javascript] Cytoscape.js에서 그래프의 엣지에 화살표 또는 선 스타일을 설정하는 방법은 무엇인가요?

24 Nov 2023

javascript

Cytoscape.js에서 그래프의 엣지에 화살표 또는 선 스타일을 설정하는 방법은 다음과 같습니다:

화살표 스타일 설정:

엣지의 화살표 모양을 설정하기 위해 arrowshape 속성을 사용합니다.
예를 들어, ‘triangle’ 값은 삼각형 화살표를 나타냅니다.
화살표를 원하는 방향으로 설정하려면 source-endpoint 또는 target-endpoint 속성을 사용합니다.

cy.edges().style({
    'line-style': 'dotted', // 선택적인 선 스타일을 설정
    'arrowshape': 'triangle', // 화살표 모양 설정
    'source-endpoint': 'outside-to-node', // 화살표 방향 설정
    'target-endpoint': 'inside-to-node' // 화살표 방향 설정
});

선 스타일 설정:
- 엣지의 선 스타일을 설정하기 위해 line-style 속성을 사용합니다.
- 예를 들어, ‘solid’ 값은 실선을 나타냅니다.
- 추가적인 선 스타일 속성으로는 line-color, line-width 등이 있습니다.
```
cy.edges().style({
    'line-style': 'solid', // 선 스타일 설정
    'line-color': '#333', // 선 색상 설정
    'line-width': 2 // 선 두께 설정
});
```

Cytoscape.js의 style() 메소드를 사용하여 엣지의 화살표 또는 선 스타일을 쉽게 설정할 수 있습니다. 참조 문서를 통해 Cytoscape.js의 다양한 스타일 속성 및 값에 대해 더 자세히 알아보실 수 있습니다.

참조 문서: