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' 。