如何使用Cytoscape.js自定义调整指定边的位置与形态？

核心解决思路 #

Cytoscape中通过为指定边设置归一化端点坐标（节点自身坐标系内，x轴左→右为0→1，y轴上→下为0→1），配合straight曲线样式，就能实现垂直形态的边连接。之前设置source-endpoint导致页面空白，大概率是坐标格式错误（比如用数组而非字符串）或数值超出0-1范围。

针对需求的代码实现 #

假设你的Cytoscape实例已初始化完成，直接在cy.ready()回调中添加以下逻辑：

cy.ready(function(){
  // 需求1：将AssetTp到CLnItm的边改为垂直连接（源底→目标顶）
  const assetToClnEdge = cy.edges('[source="AssetTp"][target="CLnItm"]');
  assetToClnEdge.style({
    'curve-style': 'straight', // 强制直线，避免默认曲线干扰
    'source-endpoint': '0.5 1', // AssetTp底部中心（x=0.5水平居中，y=1对应节点底部）
    'target-endpoint': '0.5 0'  // CLnItm顶部中心（y=0对应节点顶部）
  });

  // 需求2：调整指定边（例：id为2-8的边）为UoM右侧垂直形态
  const targetEdge = cy.edges('#2-8');
  targetEdge.style({
    'curve-style': 'straight',
    'source-endpoint': '1 1', // AssetTp底部最右侧（x=1对应节点右边界）
    'target-endpoint': '1 0'  // UoM顶部最右侧，实现垂直对齐
  });

  // 生成并保存PNG（复用你已有的保存逻辑）
  cy.png().then(pngData => {
    // 这里可添加文件保存逻辑，比如触发下载或写入本地
  });
});

关键参数说明 #

• curve-style: straight：强制边为直线，确保垂直形态生效
• source-endpoint/target-endpoint：格式为"x y"字符串，x/y取值0-1，对应节点自身的相对位置：
  • 0 0：节点左上角
  • 0.5 0：节点顶部中心
  • 0.5 1：节点底部中心
  • 1 1：节点右下角

内容的提问来源于stack exchange，提问作者user2708952