在 Cytoscape.js 中，要实现节点从不同位置连接连线到另一个节点（例如左侧或右侧的上、中、下）

在 Cytoscape.js 中，要实现节点从不同位置连接连线到另一个节点（例如左侧或右侧的上、中、下），可以通过 定义边的端点（sourceEndpoint 和 targetEndpoint） 来实现。以下是具体实现方法：

1. 基础配置
   在边的定义中，使用 sourceEndpoint 和 targetEndpoint 指定连线的起始和结束位置。Cytoscape.js 支持以下预定义位置：

方位组合：left/right/top/bottom + - + top/middle/bottom（例如 left-top, right-middle）

百分比坐标：直接指定 x 和 y 的百分比（如 { x: 0, y: 0.5 } 表示左侧中点）

示例代码：

javascript 
const cy = cytoscape({
  container: document.getElementById('cy'),
  elements: {
    nodes: [
      { data: { id: 'A' } },
      { data: { id: 'B' } },
    ],
    edges: [
      {
        data: {
          id: 'A-B1',
          source: 'A',
          target: 'B',
          // 从 A 的右侧中点连接到 B 的左侧中点
          sourceEndpoint: { position: 'right-middle' },
          targetEndpoint: { position: 'left-middle' }
        }
      },
      {
        data: {
          id: 'A-B2',
          source: 'A',
          target: 'B',
          // 从 A 的右侧顶部连接到 B 的左侧底部
          sourceEndpoint: { position: 'right-top' },
          targetEndpoint: { position: 'left-bottom' }
        }
      }
    ]
  },
  style: [
    {
      selector: 'node',
      style: {
        'label': 'data(id)',
        'width': 40,
        'height': 40,
        'shape': 'rectangle' // 或 'ellipse'
      }
    },
    {
      selector: 'edge',
      style: {
        'curve-style': 'bezier',
        'target-arrow-shape': 'triangle'
      }
    }
  ]
});

2. 动态生成不同端点的边
   如果需要为同一对节点生成多个不同端点的边，可以通过循环动态创建：

javascript 
const positions = ['top', 'middle', 'bottom'];
positions.forEach(pos => {
  cy.add({
    data: {
      id: `A-B-${pos}`,
      source: 'A',
      target: 'B',
      sourceEndpoint: { position: `right-${pos}` },
      targetEndpoint: { position: `left-${pos}` }
    }
  });
});

3. 自定义百分比坐标
   如果需要更精细的控制，可以直接指定百分比坐标：

javascript 
sourceEndpoint: { x: 0, y: 0.25 }, // 左侧顶部 (25% 位置)
targetEndpoint: { x: 1, y: 0.75 }  // 右侧底部 (75% 位置)

4. 注意事项
   节点形状影响：rectangle 和 ellipse 的端点计算方式不同，建议先固定节点形状。

自动避让：如果边过多重叠，可以启用 edge-distances 或使用布局算法优化。

可视化调试：通过 cy.debug 查看节点和边的实际坐标。

完整效果示例
Cytoscape.js 多端点连接示意图
（示意图：一个节点从右侧的不同位置连接到另一个节点的左侧不同位置）

通过上述方法，你可以灵活控制连线的起始和结束位置，满足复杂关系图的绘制需求。

以上就是文章全部内容了，如果喜欢这篇文章的话，还希望三连支持一下，感谢！