[javascript] Cytoscape.js에서 그래프의 노드 및 엣지에 사용자 정의 데이터 속성을 추가하여 그래프의 상세 정보를 표현하는 방법은 무엇인가요?

24 Nov 2023

javascript

그래프의 노드 및 엣지에 사용자 정의 데이터 속성을 추가하기 위해서는 먼저 Cytoscape.js를 초기화해야합니다. 그런 다음, 각 노드 및 엣지 객체에 사용자 정의 데이터를 포함시킬 수 있습니다. 이 사용자 정의 데이터는 해당 객체의 속성으로 추가됩니다.

아래는 간단한 예제입니다:

var cy = cytoscape({
  container: document.getElementById('cy'),
  
  elements: [
    { data: { id: 'node1', label: 'Node 1', customData: 'Custom Data 1' } },
    { data: { id: 'node2', label: 'Node 2', customData: 'Custom Data 2' } },
    { data: { id: 'edge1', source: 'node1', target: 'node2', customData: 'Custom Data for Edge' } }
  ],
  
  style: [
    {
      selector: 'node',
      style: {
        'label': 'data(label)'
      }
    },
    {
      selector: 'edge',
      style: {
        'label': 'data(customData)',
        'line-color': 'black'
      }
    }
  ]
});

위의 코드에서는 ‘customData’라는 사용자 정의 데이터 속성을 가진 노드와 엣지를 생성하고 있습니다. 이러한 사용자 정의 데이터는 요소의 data 객체에 추가됩니다.

그리고 스타일을 정의하는 부분에서는 ‘data(customData)’를 사용하여 엣지의 라벨로 사용자 정의 데이터를 표시할 수 있습니다.

위의 예제를 실행하면, 노드와 엣지에 사용자 정의 데이터 속성이 추가되어 그래프의 상세 정보를 표현하는 것을 확인할 수 있습니다.

더 자세한 내용은 Cytoscape.js 문서를 참조하십시오.