Cytoscape.js 使用edgehandles 插件，动态创建节点之间的连线

在 Cytoscape.js 中，使用edgehandles 插件，用于通过拖拽交互创建边（连线）。它允许用户从一个节点拖拽到另一个节点来创建边。以下是 edgehandles 插件的使用方法和详细说明。

1. 安装 edgehandles 插件
   首先，确保你已经安装了 edgehandles 插件。如果未安装，可以通过以下方式安装：

使用 npm 安装

bash 
npm install cytoscape-edgehandles

通过 CDN 引入

html 
<script src="https://cdn.jsdelivr.net/npm/cytoscape-edgehandles@3.5.3/cytoscape-edgehandles.min.js"></script>

运行 HTML
2. 注册插件
在使用 edgehandles 插件之前，需要将其注册到 Cytoscape.js 中。

示例代码

javascript 
import cytoscape from 'cytoscape';
import edgehandles from 'cytoscape-edgehandles';

// 注册插件
cytoscape.use(edgehandles);

3. 初始化 edgehandles
   在 Cytoscape 实例初始化后，可以通过 cy.edgehandles() 方法启用 edgehandles 插件。

示例代码
javascript 
const cy = cytoscape({
   
  container: document.getElementById('cy'),
  elements: [
    {
    data: {
    id: 'a' } },
    {
    data: {
    id: 'b' } },
    {
    data: {
    id: 'c' } },
  ],
  style: [
    {
   
      selector: 'node',
      style: {
   
        'label': 'data(id)',
        'width': 50