Cytoscape.js如何实现多条重复边自动合并为对应宽度的单条边

方案1：初始化前预处理边数据（推荐，性能最优） #

直接在传入Cytoscape前对边数据做聚合统计，无需手动计算，代码示例如下：

1. 聚合重复边并新增计数字段

// 你的原始输入数据
const graphData = {
  nodes: [/* 原有节点数据 */],
  edges: [/* 原有边数据 */]
}

const edgeCountMap = new Map()
graphData.edges.forEach(edge => {
  // 有向边统计key：source和target顺序固定
  const edgeKey = `${edge.data.source}|${edge.data.target}`
  // 若为无向边，改用下面的key，避免A→B和B→A被判定为不同边
  // const edgeKey = [edge.data.source, edge.data.target].sort().join('|')

  if (edgeCountMap.has(edgeKey)) {
    edgeCountMap.get(edgeKey).count += 1
  } else {
    edgeCountMap.set(edgeKey, {
      ...edge.data,
      count: 1
    })
  }
})

// 替换为聚合后的边数据
graphData.edges = Array.from(edgeCountMap.values()).map(item => ({ data: item }))

2. 修改边样式绑定宽度
   在你的原有edge样式配置中新增width属性，直接绑定计数字段即可：

{
  selector: 'edge',
  css: {
    'curve-style': 'bezier',
    'target-arrow-shape': 'triangle',
    'width': 'data(count)' // 重复边数量直接对应边宽度，也可自定义系数比如 `width: ele => ele.data('count') * 2`
  }
}

方案2：Cytoscape初始化后处理 #

如果不方便修改原始输入数据，可以在实例初始化后通过API自动合并：

const cy = cytoscape({
  // 你的原有完整配置，先加载所有原始边
  container: document.getElementById('cy'),
  elements: graphData,
  style: [/* 原有样式，先保留基础edge配置 */]
})

// 合并重复边
const processedEdgeKeys = new Set()
cy.edges().forEach(edge => {
  const source = edge.data('source')
  const target = edge.data('target')
  const edgeKey = `${source}|${target}`
  // 无向边同样替换为排序后的key
  // const edgeKey = [source, target].sort().join('|')

  if (processedEdgeKeys.has(edgeKey)) return
  processedEdgeKeys.add(edgeKey)

  const sameEdges = cy.edges(`[source="${source}"][target="${target}"]`)
  edge.data('count', sameEdges.length)
  sameEdges.not(edge).remove()
})

// 同样在edge样式中绑定width为data(count)即可

两种方案都兼容cytoscape.js 3.19.1版本，无需手动统计、删除重复边。如果需要保留重复边的其他属性，在聚合步骤中自行拓展计数逻辑即可。

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