Cytoscape图边穿过节点问题咨询：如何避免交叉误导？

问题原因确认 #

没错，你猜的完全对——这个问题确实是breadth-first布局的节点排列特性加上默认直边样式共同导致的。Breadth-first布局会按层级展开排列节点，当两个节点的连线刚好经过其他节点的位置时，直边就会和中间节点重叠，很容易让用户误以为存在额外的连接关系，就像你遇到的RH4和E8的连线穿过RH1的情况。

实用解决方案 #

针对这个问题，咱们有几种不同的解决思路，你可以根据自己的视觉需求和场景选择：

1. 改用曲边避开节点遮挡 #

最直接的办法就是把直边改成曲边，Cytoscape可以通过样式配置轻松实现。你只需要在edge的样式规则里添加'curve-style': 'bezier'，还能通过control-point-step-size参数调整弯曲的幅度：

selector: 'edge',
style: {
  'width': 3,
  'line-color': function(ele) { return ele.data('relation') },
  'target-arrow-color': function(ele) { return ele.data('relation') },
  'target-arrow-shape': 'triangle',
  // 开启曲边样式
  'curve-style': 'bezier',
  'control-point-step-size': 40 // 数值越大，边的弯曲程度越明显
}

2. 优化Breadth-first布局参数 #

如果不想改边的样式，咱们可以调整breadthfirst布局的配置，通过增大节点间距、指定根节点等方式，避免节点刚好排列在同一条直线上：

layout: {
  name: 'breadthfirst',
  spacingFactor: 1.5, // 放大节点之间的间距
  nodeDimensionsIncludeLabels: true, // 布局时把节点标签的尺寸也算进去
  roots: '#LH1, #RH1' // 指定布局的根节点，让节点从这两个点开始层级展开
}

3. 切换到支持自动避让的布局 #

要是曲边不符合你的设计风格，还可以试试内置的cose布局——它会自动避让节点和边缘，从根源上避免连线穿过节点的情况：

layout: {
  name: 'cose',
  idealEdgeLength: 100, // 设置理想的边长度
  nodeOverlap: 20 // 节点之间的最小避让距离
}

4. 增大节点尺寸并提升层级 #

如果以上方法都不想用，咱们还可以通过增大节点的尺寸，让节点覆盖住穿过它的边，同时确保节点显示在边的上方：

selector: 'node',
style: {
  'background-color': 'mapData(activation, -1, 1, blue, red)',
  'label': 'data(id)',
  'width': 60, // 增大节点宽度
  'height': 60, // 增大节点高度
  'z-index': 10 // 让节点显示在边的上方
}

完整修改示例代码 #

这里给你整合了曲边样式和优化后布局参数的完整代码，直接就能运行：

<html>
<head>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<style>
body { font: 14px helvetica neue, helvetica, arial, sans-serif; }
#cy { height: 100%; width: 100%; position: absolute; left: 0; top: 0; }
</style>
</head>
<body>
<div id="cy"></div>
<script>
var cy = cytoscape({ 
  container: document.getElementById('cy'), 
  style: [
    { 
      selector: 'node', 
      style: { 
        'background-color': 'mapData(activation, -1, 1, blue, red)', 
        'label': 'data(id)',
        'width': 60,
        'height': 60
      } 
    }, 
    { 
      selector: 'edge', 
      style: { 
        'width': 3, 
        'line-color': function(ele) { return ele.data('relation') }, 
        'target-arrow-color': function(ele) { return ele.data('relation') }, 
        'target-arrow-shape': 'triangle',
        'curve-style': 'bezier',
        'control-point-step-size': 40
      } 
    }
  ], 
  layout: { 
    name: 'breadthfirst',
    spacingFactor: 1.5,
    nodeDimensionsIncludeLabels: true
  }, 
  elements: { 
    nodes: [
      { group: 'nodes', data: { id: 'E1', activation: 0 } }, 
      { group: 'nodes', data: { id: 'E2', activation: 0 } }, 
      { group: 'nodes', data: { id: 'E3', activation: 0 } }, 
      { group: 'nodes', data: { id: 'E4', activation: 0 } }, 
      { group: 'nodes', data: { id: 'E5', activation: 0 } }, 
      { group: 'nodes', data: { id: 'E6', activation: 0 } }, 
      { group: 'nodes', data: { id: 'E7', activation: 0 } }, 
      { group: 'nodes', data: { id: 'E8', activation: 0 } }, 
      { group: 'nodes', data: { id: 'LH1', activation: 0 } }, 
      { group: 'nodes', data: { id: 'RH1', activation: 0 } }, 
      { group: 'nodes', data: { id: 'LH2', activation: 0 } }, 
      { group: 'nodes', data: { id: 'LH3', activation: 0 } }, 
      { group: 'nodes', data: { id: 'RH2', activation: 0 } }, 
      { group: 'nodes', data: { id: 'LH4', activation: 0 } }, 
      { group: 'nodes', data: { id: 'RH3', activation: 0 } }, 
      { group: 'nodes', data: { id: 'RH4', activation: 0 } } 
    ], 
    edges: [
      { group: 'edges', data: { id: 'edge0', source: 'E4', target: 'E5', relation: 'green' } }, 
      { group: 'edges', data: { id: 'edge1', source: 'E6', target: 'E7', relation: 'green' } }, 
      { group: 'edges', data: { id: 'edge2', source: 'LH1', target: 'E1', relation: 'red' } }, 
      { group: 'edges', data: { id: 'edge3', source: 'LH1', target: 'RH1', relation: 'green' } }, 
      { group: 'edges', data: { id: 'edge4', source: 'LH2', target: 'E4', relation: 'red' } }, 
      { group: 'edges', data: { id: 'edge5', source: 'LH3', target: 'E4', relation: 'red' } }, 
      { group: 'edges', data: { id: 'edge6', source: 'LH4', target: 'E6', relation: 'red' } }, 
      { group: 'edges', data: { id: 'edge7', source: 'RH1', target: 'E2', relation: 'red' } }, 
      { group: 'edges', data: { id: 'edge8', source: 'RH1', target: 'E3', relation: 'red' } }, 
      { group: 'edges', data: { id: 'edge9', source: 'RH2', target: 'E5', relation: 'red' } }, 
      { group: 'edges', data: { id: 'edge10', source: 'RH3', target: 'E7', relation: 'red' } }, 
      { group: 'edges', data: { id: 'edge11', source: 'RH4', target: 'E8', relation: 'red' } } 
    ] 
  } 
});
</script>
</body>
</html>

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