Javascript 仅在节点子集上布局DirectedGraph(dagre)
我正在寻找一种方法,使用JointJS/Rappid图表库只布局有向图的一部分节点 我需要在图中添加一些“固定”节点,并对“其他”节点进行布局,假设它们可以相互连接或与某些固定节点连接(图已添加到图纸中) 由于必须在图形对象上使用Javascript 仅在节点子集上布局DirectedGraph(dagre),javascript,jointjs,dagre,rappid,Javascript,Jointjs,Dagre,Rappid,我正在寻找一种方法,使用JointJS/Rappid图表库只布局有向图的一部分节点 我需要在图中添加一些“固定”节点,并对“其他”节点进行布局,假设它们可以相互连接或与某些固定节点连接(图已添加到图纸中) 由于必须在图形对象上使用joint.layout.DirectedGraph.layoutAPI,我想知道是否有任何机制可以在布局计算过程中“固定”图形的某些节点(例如,要添加到单元格对象中的某些属性)。 类似的东西也可以,但是getSubgraph API不应该检索传入和传出链接 var s
joint.layout.DirectedGraph.layout
API,我想知道是否有任何机制可以在布局计算过程中“固定”图形的某些节点(例如,要添加到单元格对象中的某些属性)。
类似的东西也可以,但是getSubgraph API不应该检索传入和传出链接
var subGraph = graph.getSubgraph([A, B]);
joint.layout.DirectedGraph.layout(subGraph, layoutOpt);
查看文档时,我无法识别这种功能。
如果不支持此功能,是否还有其他方法可用于实现我的目标?(当然,我也可以在操作结束时布局整个图形并应用我的固定和弦,但我一直在寻找比这更好的东西)。因此,我非常确定使用Dagre的自动布局功能现在只在joint js的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;
});
我应该补充的是,最后两行是不必要的(在元素的属性上设置元数据对象)——我在元素对象上维护一些额外的元数据以用于其他目的。