[javascript] Cytoscape.js에서 그래프의 노드에 대한 특정 속성을 조정하여 그래프의 특정 부분을 강조하는 방법은 무엇인가요?

24 Nov 2023

javascript

먼저 Cytoscape.js를 사용하여 그래프를 생성해야합니다. 예를 들어 다음과 같이 그래프를 생성할 수 있습니다.

var cy = cytoscape({
  container: document.getElementById('cy'),

  elements: [
    { data: { id: 'node1' } },
    { data: { id: 'node2' } },
    { data: { id: 'node3' } },
    { data: { id: 'edge1', source: 'node1', target: 'node2' } },
    { data: { id: 'edge2', source: 'node2', target: 'node3' } }
  ],

  style: [
    {
      selector: 'node',
      style: {
        'background-color': '#666',
        'label': 'data(id)'
      }
    },
    {
      selector: 'edge',
      style: {
        'width': 3,
        'line-color': '#ccc'
      }
    }
  ]
});

그 다음, 특정 노드에 대한 속성을 변경하여 강조할 수 있습니다. 예를 들어, ‘node2’라는 ID를 가진 노드를 강조하고자 한다면 다음과 같이 할 수 있습니다.

var node = cy.$('#node2');
node.style('background-color', 'red');

위의 코드에서 cy.$('#node2')를 사용하여 ‘node2’ ID를 가진 노드에 접근한 후, style('background-color', 'red')를 사용하여 해당 노드의 배경색을 빨간색으로 변경했습니다.

노드를 강조할 때 다양한 속성을 변경할 수 있습니다. 예를 들어, 노드의 크기, 모양, 테두리 색 등을 변경하여 그래프에서 특정 부분을 시각적으로 강조할 수 있습니다. 이러한 속성은 Cytoscape.js 스타일 문서를 참조하여 자세히 알아볼 수 있습니다.