如何在Cytoscape中调整Node1与Node3间红色边的曲线样式？

问题描述 #

我拥有Node1、Node2、Node3三个节点，节点间的连接关系如图所示。需求是将Node1与Node3之间的红色边调整为图中展示的特定样式。尝试使用curve-style: segments配置样式但未达预期，不清楚如何设置segment-distances和segment-weights参数，当前应用的样式代码如下：

{
    selector: '#edge13',
    style: {
      'width': 3,
      'curve-style': 'segments',
      'segment-distances': [-20, 20, -20, 20],
      'segment-weights': [0, 0.2, 0.4, 0.8],
      'source-endpoint': '-50% 0',
      'target-endpoint': '50% 0',
    },
}

参数原理说明 #

要调整segments模式的边样式，需先明确两个核心参数的作用：

• segment-weights：数组内的数值为边路径上的位置权重，范围从0（边的起点）到1（边的终点），数组长度必须与segment-distances完全匹配，每个权重对应一个偏移控制点。
• segment-distances：每个权重位置对应的边相对于中心线的偏移距离，正数表示向外侧偏移，负数表示向内侧偏移（方向取决于节点布局的坐标系）。

针对性配置示例 #

根据常见的绕开中间节点或锯齿形边需求，提供两种调整方案：

方案1：锯齿形波浪边 #

适合需要重复起伏的样式，调整控制点数量和偏移幅度即可匹配目标效果：

{
    selector: '#edge13',
    style: {
      'width': 3,
      'curve-style': 'segments',
      'segment-weights': [0, 0.25, 0.5, 0.75, 1],
      'segment-distances': [-25, 25, -25, 25, 0],
      'source-endpoint': '-50% 0',
      'target-endpoint': '50% 0',
      'line-color': 'red'
    },
}

• 权重数组将边均匀分成4段，每段设置交替的正负偏移，形成锯齿效果
• 可修改segment-distances中的数值大小来调整起伏幅度，修改权重值来调整起伏的密集程度

方案2：绕开中间Node2的折线边 #

如果目标是让边避开中间的Node2，可采用少控制点的凸形折线配置：

{
    selector: '#edge13',
    style: {
      'width': 3,
      'curve-style': 'segments',
      'segment-weights': [0, 0.5, 1],
      'segment-distances': [0, 60, 0],
      'source-endpoint': '-50% 0',
      'target-endpoint': '50% 0',
      'line-color': 'red'
    },
}

• 中间权重0.5对应边的中点，设置60的偏移量让边向外侧凸起，避开Node2的位置
• 可根据Node2的实际位置调整偏移数值的正负和大小

关键注意事项 #

• segment-weights数组必须是递增的数值序列，从0开始到1结束
• segment-distances与segment-weights的数组长度必须完全一致
• 若目标样式有特定的折点位置，可精准调整权重值来对应路径上的比例位置

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