Cytoscape.js中Edge与箭头不对齐呈斜向的问题求助

问题现象 #

拓扑图中的edge1、edge6、edge5和edge10呈轻微斜向，箭头无法与线条正确对齐。

问题原因 #

你设置的target-endpoint使用了百分比偏移超出节点范围（如-200%和200%），当端点位置超出节点边界过多时，Cytoscape的直线渲染会出现计算偏差，导致线条倾斜、箭头错位。另外，端点的垂直偏移计算逻辑在奇数数量的edge时，首尾edge的偏移量会超出预期的水平对齐范围。

解决步骤 #

• 替换超出范围的百分比端点值，改用相对节点边界的固定侧边定位（如left/right明确指定节点边缘），配合精准的垂直偏移百分比，避免渲染计算错误。
• 调整垂直偏移的计算逻辑，让所有edge的端点在垂直方向均匀分布，避免首尾edge偏移过大。

修改后的完整代码 #

var cy = cytoscape({
    container: document.getElementById('cy'),
    elements: [
        // 节点定义
        { data: { id: 'node1', label: 'NODE 1' } },
        { data: { id: 'node2', label: 'NODE 2' } },

        // 边定义
        { data: { source: 'node1', target: 'node2', id: 'edge1' } },
        { data: { source: 'node1', target: 'node2', id: 'edge2' } },
        { data: { source: 'node1', target: 'node2', id: 'edge3' } },
        { data: { source: 'node1', target: 'node2', id: 'edge4' } },
        { data: { source: 'node1', target: 'node2', id: 'edge5' } },
        { data: { source: 'node2', target: 'node1', id: 'edge6' } },
        { data: { source: 'node2', target: 'node1', id: 'edge7' } },
        { data: { source: 'node2', target: 'node1', id: 'edge8' } },
        { data: { source: 'node2', target: 'node1', id: 'edge9' } },
        { data: { source: 'node2', target: 'node1', id: 'edge10' } }
    ],
    layout: {
        name: 'grid',
        spacingFactor: 2,
        rows: 1,
        cols: 2,
    },
    style: [
        {
            selector: 'node',
            style: {
                'shape': 'rectangle',
                'padding': 0,
                'height': 300,
                'width': 200,
                'border-width': 2,
                'border-color': 'black'
            }
        },
        {
            selector: 'edge',
            style: {
                'width': 5,
                'arrow-scale': 1.5,
                'text-margin-y': -20,
                'label': 'data(id)',
                'line-color': '#000',
                'target-arrow-color': '#000',
                "curve-style": "straight",
                'target-arrow-shape': 'triangle'
            }
        }
    ]
});

cy.fit();

// 调整边位置
const spacing = 15;
cy.batch(() => {
    const edgesFromSource = cy.edges('[source="node1"]');
    const edgesFromTarget = cy.edges('[source="node2"]');

    // 处理node1到node2的边
    edgesFromSource.forEach((edge, i) => {
        const verticalPos = 15 + (i * spacing);
        edge.style({
            'source-endpoint': `right 0%`, // 固定在源节点右侧边缘
            'target-endpoint': `left ${verticalPos}%`, // 目标节点左侧，垂直方向均匀偏移
        });
    });

    // 处理node2到node1的边
    edgesFromTarget.forEach((edge, i) => {
        const verticalPos = 15 + (i * spacing);
        edge.style({
            'source-endpoint': `left 0%`, // 固定在源节点左侧边缘
            'target-endpoint': `right ${verticalPos}%`, // 目标节点右侧，垂直方向均匀偏移
        });
    });
});

关键修改点说明 #

1. 端点位置规范：将source-endpoint和target-endpoint改为使用right/left明确指定节点侧边，避免超大百分比导致的渲染偏差。
2. 垂直偏移逻辑优化：按索引递增计算垂直位置，让5条边从15%开始，每条间隔15%均匀分布，确保所有线条水平对齐，箭头与线条完美匹配。

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