[javascript] Cytoscape.js에서 그래프의 노드에 대한 특정 속성을 기준으로 색상 또는 크기를 설정하는 방법은 무엇인가요?

24 Nov 2023

javascript

스타일 시트를 사용하여 속성에 따라 노드 색상 변경하기: ```javascript var cy = cytoscape({ container: document.getElementById(‘cy’),

elements: [ { data: { id: ‘a’, group: ‘Group 1’ } }, { data: { id: ‘b’, group: ‘Group 2’ } }, { data: { id: ‘c’, group: ‘Group 1’ } } ],

style: [ { selector: ‘node’, style: { ‘background-color’: function(ele) { if (ele.data(‘group’) === ‘Group 1’) { return ‘red’; } else if (ele.data(‘group’) === ‘Group 2’) { return ‘blue’; } else { return ‘gray’; } } } } ] });

위의 예시에서 `group`이라는 속성을 기준으로 노드의 배경색을 설정하였습니다. `ele`은 Cytoscape.js에서 각 노드를 나타내는 요소입니다. `ele.data('속성명')`을 사용하여 해당 속성의 값을 가져올 수 있습니다. 함수를 사용하여 각 노드의 속성을 기준으로 다른 색상을 지정할 수 있습니다.

2. 스타일 시트를 사용하여 속성에 따라 노드 크기 변경하기:
```javascript
var cy = cytoscape({
  container: document.getElementById('cy'),
  
  elements: [
    { data: { id: 'a', size: 10 } },
    { data: { id: 'b', size: 20 } },
    { data: { id: 'c', size: 30 } }
  ],
  
  style: [
    {
      selector: 'node',
      style: {
        width: function(ele) {
          return ele.data('size');
        },
        height: function(ele) {
          return ele.data('size');
        }
      }
    }
  ]
});

위의 예시에서 size라는 속성을 기준으로 노드의 크기를 설정하였습니다. ele.data('속성명')을 사용하여 해당 속성의 값을 가져오고, 함수를 사용하여 크기를 동적으로 설정할 수 있습니다.

참고:

Cytoscape.js 스타일 시트 문서: https://js.cytoscape.org/#style
Cytoscape.js 데이터 문서: https://js.cytoscape.org/#data