2016-06-20 4 views
2

私はJointJS/Rappidダイアグラムライブラリを持つ有向グラフのノードのサブセットのみをレイアウトする方法を探しています。ノードのサブセットにのみレイアウトDirectedGraph(ダグレ)

グラフに「固定」ノードがいくつか必要であり、それらがお互いにまたは固定ノードのいくつか(グラフが既に紙に追加されている)と接続できると仮定して、「その他」をレイアウトします。

グラフオブジェクト上でAPIを使用する必要があるため、レイアウト計算中にグラフのノードを固定してしまうようなメカニズムがあるかどうかは疑問でした。たとえば、セルオブジェクトに追加する場合)。 はまた、このようなものは、罰金することができますが、着信と発信のリンクはgetSubgraphのAPI私はこのような機能を識別することができませんでしたドキュメントを見てみると

var subGraph = graph.getSubgraph([A, B]); 
joint.layout.DirectedGraph.layout(subGraph, layoutOpt); 

によって取得されるべきではありません。 この機能がサポートされていない場合、目標を達成するために使用できる他の方法がありますか? (もちろん、グラフ全体をレイアウトして、操作が終了したら固定コードを適用することもできますが、これよりも優れたものを探していました)。

答えて

2

Dagreを使用した自動レイアウト機能は、ジョイントjのRappidバージョン(有料)でのみご利用いただけます。私が行うことは、Dagreを別々に使ってレイアウト計算を行い、その後要素を繰り返してDagre出力を使って手動で位置を変更することです。理想的ではありませんが、ノードのサブセットだけを見るという点で、あなたが望むものを何でも行うことができます。以下の基本的なコード(graphObjがjointjsグラフオブジェクトである)、あなたは要素やリンクのサブセットで作業したい場合は出発点としてこれを使用することができるはずです。

var nodes = []; 
    var edges = []; 

    var elements = graphObj.getElements(); 
    elements.forEach(function(element){ 
     element.label = element.id; 
     element.width = element.attributes.size.width; 
     element.height = element.attributes.size.height; 
    }); 
    var links = graphObj.getLinks(); 
    links.forEach(function(link){ 
     edges.push({source: link.getSourceElement(), target: link.getTargetElement()}); 
    }); 
    dagre.layout() 
     .nodeSep(150) 
     .edgeSep(100) 
     .rankSep(150) 
     .rankDir("LR") 
     .nodes(elements) 
     .edges(edges) 
     .run(); 

    elements.forEach(function(element){ 
     element.position(element.dagre.x, element.dagre.y); 
     element.attributes.prop.metadata.x = element.dagre.x; 
     element.attributes.prop.metadata.y = element.dagre.y; 

    }); 
+0

私は最後の2行を追加する必要があります要素のプロパティにメタデータオブジェクトを設定する必要はありません。他の目的のために、要素オブジェクトにいくつかの追加のメタデータを保持しています。 –

関連する問題