如何在Cytoscape.js中设置图边跨跃另一图边？

当然可以实现！Cytoscape.js 本身就支持这种边交叉时的跨跃避让效果，我给你两种实用的实现方式，一步步来：

一、使用内置样式属性（推荐） #

这是最简便的方式，Cytoscape.js 提供了专门的样式属性来处理边的交叉显示：

• 核心思路：通过设置curve-style: haystack让边以直线方式渲染，同时配置交叉处的标记样式，模拟跨跃效果。

给你一段可直接复用的样式代码：

cy.style()
  .selector('edge')
    .style({
      'curve-style': 'haystack', // 开启堆叠式直线渲染，支持交叉避让
      'haystack-radius': 0, // 设置为0就是纯直线，大于0会带轻微弧度
      'crossing-shape': 'bar', // 交叉处的标记形状：bar=短杠（模拟跨跃）、tee=T型、none=无标记
      'crossing-width': 8, // 标记的宽度，数值越大越明显
      'crossing-color': '#ffffff', // 标记颜色，建议和边/背景形成对比
      'line-width': 2, // 边本身的宽度，配合标记更清晰
      'line-color': '#333333'
    })
  .update();

关键属性解释： #

• curve-style: haystack：这是实现跨跃效果的核心，它会自动检测边的交叉点，并渲染避让标记。
• crossing-shape：选择bar是最接近“跨跃”视觉效果的，它会在交叉处画一个垂直于边的短杠，看起来像是一条边从另一条边上方跨过去。
• crossing-color：最好设置成和背景色一致，这样短杠会“盖住”下方的边，模拟跨跃的遮挡感。

二、针对特定边设置效果 #

如果你不想让所有边都有跨跃效果，可以给需要的边添加自定义类，再单独设置样式：

1. 给目标边添加类：

// 比如给id为'e1'的边添加crossable类
cy.$('#e1').addClass('crossable');

2. 编写针对性的样式：

cy.style()
  .selector('edge.crossable')
    .style({
      'curve-style': 'haystack',
      'crossing-shape': 'bar',
      'crossing-color': '#fff'
    })
  .selector('edge')
    .style({
      'curve-style': 'bezier', // 其他边保持默认的贝塞尔曲线
      'line-color': '#666'
    })
  .update();

注意事项 #

• 确保你的Cytoscape.js版本在3.0及以上，这些交叉相关的属性是在3.0版本后引入的。
• 如果你的图布局比较复杂，可能需要调整haystack-radius和crossing-width的值，让跨跃效果更自然。

这样设置后，就能实现你想要的边跨跃另一条边的效果啦！

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