何在 Vue3 中使用 Cytoscape.js 创建交互式网络图

<template>
  <div ref="cyContainer"></div>
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
import cytoscape from 'cytoscape';
 
const cyContainer = ref(null);
 
onMounted(() => {
  let cy = cytoscape({
    container: cyContainer.value, // 指定DOM元素作为Cytoscape的容器
    style: [ // 定义样式
      {
        selector: 'node',
        style: {
          'content': 'data(id)',
          'text-valign': 'center',
          'text-outline-width': 2,
          'text-outline-color': '#fff'
        }
      },
      {
        selector: ':selected',
        style: {
          'border-width': 3,
          'border-color': '#333'
        }
      }
    ],
    elements: { // 定义网络图的节点和边
      nodes: [
        { data: { id: 'a', foo: 'bar' } },
        { data: { id: 'b', foo: 'baz' } }
      ],
      edges: [
        { data: { source: 'a', target: 'b' } }
      ]
    },
    layout: {
      name: 'grid',
      rows: 2
    }
  });
  
  // 监听事件
  cy.on('click', 'node', function(event){
    console.log(event.target);
  });
});
</script>
 
<style>
/* 样式调整，确保Cytoscape正常显示 */
.cytoscape-container {
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>

这段代码展示了如何在Vue 3组件中集成Cytoscape.js来创建一个基本的互动网络图。首先，我们通过<template>定义了一个容器元素，并通过ref获取其DOM引用。在组件挂载(onMounted)后，我们初始化了Cytoscape实例，并指定了样式、元素和布局。最后，我们添加了一个点击节点的事件监听器来处理用户交互。