2017-12-04 6 views
0

cytoscape.jsは、グラフに冗長なエッジ/アークがある場合、グラフのレンダリングに失敗します。なぜこうなった?cytoscape.js redundant edges

例:

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)から、2つの冗長な辺を削除するグラフの動作。

1つの冗長エッジは問題ありませんが、2つ以上が問題です。これがなぜそうなのか?

回避策として、グラフから冗長なエッジを削除するためのすてきなショートカットはありますか?

答えて

2

すべてのエッジは、です。エッジスタイルがどのように指定されているので、すべての平行なエッジを互いに重ねてレンダリングしました。

レンダリングするグラフの種類に適したスタイルを使用します。たとえば、マルチグラフでは、干し草の半径がゼロでないか、またはベジエのエッジがバンドルされた干し草のエッジを使用する必要があります。

ドキュメントになどcurve-styleを参照してください:http://js.cytoscape.org/#style/edge-line

0

編集:あなたはcytoscape.jsグラフを描画するために失敗したことは言うが、it renders fine for me。あなたは本当に全くグラフを見ていませんか?もしそうなら、どのブラウザを使用していますか?あなたのコードでエラーをチェックしましたか?

ノード間の複数のエッジは、maxkfranzと同じパスに沿ってデフォルト設定されています。 'curve-style': 'bezier'にすべてのエッジが表示されるように設定するか、'haystack-radius': 1を使用して直線を維持します(0〜1の値で再生)。

矢印をオンにしていることに気付きました。これらはデフォルトの'haystack'カーブスタイルでは機能しませんので、有向グラフを視覚化する場合は'bezier'を使用することをお勧めします。

関連する問題