[javascript] Cytoscape.js에서 그래프의 특정 요소에 대한 툴팁을 추가하는 방법은 무엇인가요?
Cytoscape.js는 그래프 시각화를 위한 JavaScript 라이브러리입니다. 특정 요소에 대한 툴팁을 추가하는 방법은 다음과 같습니다:
- Cytoscape.js 라이브러리를 로드합니다.
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
- 그래프 컨테이너를 생성하고 크기를 지정합니다.
<div id="cy" style="width: 600px; height: 400px;"></div>
- 그래프를 생성하고 특정 요소에 툴팁을 추가합니다.
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
// 그래프 요소 정의
],
style: [
// 그래프 스타일 정의
],
layout: {
// 그래프 레이아웃 설정
}
});
// 그래프 요소에 툴팁 추가
var element = cy.getElementById('특정 요소 ID');
element.qtip({
content: '툴팁 내용',
show: {
event: 'mouseover'
},
hide: {
event: 'mouseout'
}
});
위의 예시 코드에서는 특정 요소 ID
에 해당하는 그래프 요소에 마우스를 올리면 툴팁 내용
이 표시됩니다. 툴팁은 마우스가 요소에 올라갈 때만 보이고, 마우스가 요소를 벗어나면 사라집니다.
Cytoscape.js에서는 다양한 방식으로 그래프 요소에 대한 툴팁을 추가할 수 있으며, qtip
API를 사용하여 세부적인 설정을 할 수도 있습니다. 자세한 내용은 Cytoscape.js 문서를 참고하시기 바랍니다.