Question

我正在尝试使用'curve-style': 'taxi'在两个父节点之间创建一条边。不幸的是，父节点之间的边缘似乎并没有直角转弯，并且通常会非常不规律地布线。

window.addEventListener('DOMContentLoaded', function() { // on dom ready

  // photos from flickr with creative commons license

  var cy = cytoscape({
    container: document.getElementById('cy'),

    style: cytoscape.stylesheet()
      .selector('node')
      .style({
        'height': 80,
        'width': 80,
        'background-fit': 'cover',
        'border-color': '#000',
        'border-width': 3,
        'border-opacity': 0.5
      })
      .selector('.eating')
      .style({
        'border-color': 'red'
      })
      .selector('.eater')
      .style({
        'border-width': 9
      })
      .selector('edge')
      .style({
        'width': 6,
        'target-arrow-shape': 'triangle',
        'line-color': '#ffaaaa',
        'target-arrow-color': '#ffaaaa',
        'curve-style': 'taxi'
      })
      .selector('#bird')
      .style({
        'background-image': 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg'
      })
      .selector('#cat')
      .style({
        'background-image': 'https://farm2.staticflickr.com/1261/1413379559_412a540d29_b.jpg'
      })
      .selector('#ladybug')
      .style({
        'background-image': 'https://farm4.staticflickr.com/3063/2751740612_af11fb090b_b.jpg'
      })
      .selector('#aphid')
      .style({
        'background-image': 'https://farm9.staticflickr.com/8316/8003798443_32d01257c8_b.jpg'
      })
      .selector('#rose')
      .style({
        'background-image': 'https://farm6.staticflickr.com/5109/5817854163_eaccd688f5_b.jpg'
      })
      .selector('#grasshopper')
      .style({
        'background-image': 'https://farm7.staticflickr.com/6098/6224655456_f4c3c98589_b.jpg'
      })
      .selector('#plant')
      .style({
        'background-image': 'https://farm1.staticflickr.com/231/524893064_f49a4d1d10_z.jpg'
      })
      .selector('#wheat')
      .style({
        'background-image': 'https://farm3.staticflickr.com/2660/3715569167_7e978e8319_b.jpg'
      }),

    elements: {
      nodes: [{
          data: {
            id: 'cat',
            parent: 'bird'
          }
        },
        {
          data: {
            id: 'bird'
          }
        },
        {
          data: {
            id: 'ladybug'
          }
        },
        {
          data: {
            id: 'aphid'
          }
        },
        {
          data: {
            id: 'rose'
          }
        },
        {
          data: {
            id: 'grasshopper'
          }
        },
        {
          data: {
            id: 'plant'
          }
        },
        {
          data: {
            id: 'wheat'
          }
        }
      ],
      edges: [{
          data: {
            source: 'cat',
            target: 'bird'
          }
        },
        {
          data: {
            source: 'bird',
            target: 'ladybug'
          }
        },
        {
          data: {
            source: 'bird',
            target: 'grasshopper'
          }
        },
        {
          data: {
            source: 'grasshopper',
            target: 'plant'
          }
        },
        {
          data: {
            source: 'grasshopper',
            target: 'wheat'
          }
        },
        {
          data: {
            source: 'ladybug',
            target: 'aphid'
          }
        },
        {
          data: {
            source: 'aphid',
            target: 'rose'
          }
        }
      ]
    },

    layout: {
      name: 'breadthfirst',
      directed: true
    }
  }); // cy init


}); // on dom ready

body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

<!DOCTYPE html>
<html>

<head>
  <link href="style.css" rel="stylesheet" />
  <meta charset=utf-8 />
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
  <title>Images</title>
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
</head>

<body>
  <div id="cy"></div>
</body>

</html>

是否有一种方法可以使滑行边缘的行为与非父节点之间的行为相同？

Answer 1

这是由于breadthfirst layout中的布局行为异常引起的。当在广度优先中使用复合节点时，布局似乎无法很好地处理内部节点，因此外部边缘并不是真正的bfs边缘（结合在一起），而是两个单独的bfs边缘（没有结合在一起）。为了使'curve-style': 'taxi'工作，我认为有一种简单但愚蠢的方法。不幸的是，父节点之间的边缘似乎无法以正确的角度旋转，因此我们必须在没有子节点的情况下进行bfs布局，然后再添加它们（这是一个愚蠢的做法，但是如果您保存所有子节点并然后添加它们：

window.addEventListener('DOMContentLoaded', function() { // on dom ready

  // photos from flickr with creative commons license

  var cy = cytoscape({
    container: document.getElementById('cy'),

    style: cytoscape.stylesheet()
      .selector('node')
      .style({
        'height': 80,
        'width': 80,
        'background-fit': 'cover',
        'border-color': '#000',
        'border-width': 3,
        'border-opacity': 0.5
      })
      .selector('.eating')
      .style({
        'border-color': 'red'
      })
      .selector('.eater')
      .style({
        'border-width': 9
      })
      .selector('edge')
      .style({
        "curve-style": "taxi",
        "taxi-direction": "downward",
        "taxi-turn": 20,
        "taxi-turn-min-distance": 5
      })
      .selector('#bird')
      .style({
        'background-image': 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg'
      })
      .selector('#cat')
      .style({
        'background-image': 'https://farm2.staticflickr.com/1261/1413379559_412a540d29_b.jpg'
      })
      .selector('#ladybug')
      .style({
        'background-image': 'https://farm4.staticflickr.com/3063/2751740612_af11fb090b_b.jpg'
      })
      .selector('#aphid')
      .style({
        'background-image': 'https://farm9.staticflickr.com/8316/8003798443_32d01257c8_b.jpg'
      })
      .selector('#rose')
      .style({
        'background-image': 'https://farm6.staticflickr.com/5109/5817854163_eaccd688f5_b.jpg'
      })
      .selector('#grasshopper')
      .style({
        'background-image': 'https://farm7.staticflickr.com/6098/6224655456_f4c3c98589_b.jpg'
      })
      .selector('#plant')
      .style({
        'background-image': 'https://farm1.staticflickr.com/231/524893064_f49a4d1d10_z.jpg'
      })
      .selector('#wheat')
      .style({
        'background-image': 'https://farm3.staticflickr.com/2660/3715569167_7e978e8319_b.jpg'
      }),

    elements: {
      nodes: [{
          data: {
            id: 'bird'
          }
        },
        {
          data: {
            id: 'ladybug'
          }
        },
        {
          data: {
            id: 'aphid'
          }
        },
        {
          data: {
            id: 'rose'
          }
        },
        {
          data: {
            id: 'grasshopper'
          }
        },
        {
          data: {
            id: 'plant'
          }
        },
        {
          data: {
            id: 'wheat'
          }
        }
      ],
      edges: [{
          data: {
            source: 'bird',
            target: 'ladybug'
          }
        },
        {
          data: {
            source: 'bird',
            target: 'grasshopper'
          }
        },
        {
          data: {
            source: 'grasshopper',
            target: 'plant'
          }
        },
        {
          data: {
            source: 'grasshopper',
            target: 'wheat'
          }
        },
        {
          data: {
            source: 'ladybug',
            target: 'aphid'
          }
        },
        {
          data: {
            source: 'aphid',
            target: 'rose'
          }
        }
      ]
    },
    layout: {
      name: 'breadthfirst',
      directed: true
    }
  }); // cy init

  cy.ready(function() {
    cy.ready(function() {
      cy.add({
        data: {
          id: 'cat',
          parent: 'bird'
        }
      });
    });
  });

}); // on dom ready

body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

<!DOCTYPE html>
<html>

<head>
  <link href="style.css" rel="stylesheet" />
  <meta charset=utf-8 />
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
  <title>Images</title>
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
</head>

<body>
  <div id="cy"></div>
</body>

</html>

我在cytoscape的css部分添加了几行，也是js文件末尾的cy.ready（）部分。

Answer 2

我对源代码进行了一些研究，发现可以通过将target-endpoint和source-endpoint边缘样式属性设置为outside-to-node来完成预期的工作。

有一些时髦的行为，当父节点距离太近时，边缘消失。我发现设置'edge-distances': 'node-position'和'taxi-turn-min-distance': '0px'可以帮助解决这一问题。以下是完整样式供参考：

'curve-style': 'taxi',
'edge-distances': 'node-position',
'taxi-turn-min-distance': '0px',
'source-arrow-shape': 'triangle-backcurve',
'target-arrow-shape': 'triangle',
'target-endpoint': 'outside-to-node',
'source-endpoint': 'outside-to-node'

如何在父节点之间创建滑行边缘？

2 个答案: