cytoscape.js冗余边缘

Question

如果图形具有多余的边/弧，cytoscape.js将无法呈现图形。 为什么会这样呢？

例：

https://jsfiddle.net/smiccke/mq5t1rw9/4/

 $(function() { var cy = window.cy = cytoscape({ container: document.getElementById('cy'), ready: function() {}, style: [{ selector: 'node', css: { 'content': 'data(name)' } }, { selector: 'edge', css: { 'target-arrow-shape': 'triangle' } }], elements: { nodes: [{ data: { id: 'j', name: 'Jerry' } }, { data: { id: 'e', name: 'Elaine' } }, { data: { id: 'k', name: 'Kramer' } }, ], edges: [{ data: { source: 'j', target: 'e' } }, { data: { source: 'j', target: 'k' } } ] } }); }); 

如果从末端删除两个冗余边（j-> e，j-> e），则该图形将起作用。

似乎一个冗余的边缘是可以的，但是两个或多个是一个问题。 有什么线索为什么会这样？

解决方法是，从图形中删除多余边的任何捷径吗？

Answer 1

所有的边缘都在那里。 您已经将所有平行的边缘彼此叠加，因为这是指定边缘样式的方式。

对要呈现的图形类型使用适当的样式。 例如，多张图可能应使用干草堆半径不为零的干草堆边缘或捆绑的贝塞尔曲线边缘。

请参阅文档中的curve-style等： http : //js.cytoscape.org/#style/edge-line

Answer 2

编辑：您提到cytoscape.js无法呈现图形，但对我来说却很好 。 您真的没有看到任何图形吗？ 如果是这样，您使用的是哪种浏览器，是否检查过代码是否存在错误？

节点之间的多个边沿默认沿与maxkfranz相同的路径。 您可以设置将显示所有边缘的'curve-style': 'bezier' ，或使用'haystack-radius': 1保持直线（播放0到1之间的值）。

我还注意到您已打开了定向箭头。 这些不适用于默认的'haystack'曲线样式，因此，如果要可视化有向边，建议使用'bezier'曲线'bezier' 。