[英]cytoscape.js multiple layouts, different layout within compound nodes
图书馆: http : //js.cytoscape.org/
客观的:
问题:在我使用 dagre 布局后,我尝试为复合节点进行布局,但它使用新布局重置所有元素,而我想将父节点保持为 dagre 定位它们
JSFIDDLE: https ://jsfiddle.net/bababalcksheep/jwm701oe/
代码:
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
layout: {
name: 'dagre'
},
style:[{selector:'node',css:{'content':'data(id)','text-valign':'center','text-halign':'center','shape':'rectangle'}},{selector:'$node > node',css:{'padding-top':'10px','padding-left':'10px','padding-bottom':'10px','padding-right':'10px','text-valign':'top','text-halign':'center','background-color':'#bbb'}},{selector:'edge',css:{'target-arrow-shape':'triangle'}},{selector:':selected',css:{'background-color':'black','line-color':'black','target-arrow-color':'black','source-arrow-color':'black'}}],
elements:{nodes:[{data:{id:'items-a',name:'items-a'}},{data:{id:'a-1',name:'a-1',parent:'items-a'}},{data:{id:'a-2',name:'a-2',parent:'items-a'}},{data:{id:'items-b',name:'items-b'}},{data:{id:'b-1',name:'b-1',parent:'items-b'}},{data:{id:'b-2',name:'b-2',parent:'items-b'}},{data:{id:'items-c',name:'items-c'}},{data:{id:'c-1',name:'c-1',parent:'items-c'}},{data:{id:'c-2',name:'c-2',parent:'items-c'}}],edges:[{'data':{'source':'items-a','target':'items-b'}},{'data':{'source':'items-b','target':'items-c'}}]},
ready: function () {
//.
//
cy = this;
// sort child nodes with grid layout using 1 column
/*
var parentNodes = cy.nodes(':parent');
parentNodes.descendants().layout({
name: 'grid',
cols: 1
}).run();
*/
//
//
}
});
对我有用的解决方案是
如果有人有更好的建议,请分享
JSFIDDLE: https ://jsfiddle.net/bababalcksheep/jwm701oe/75/
function runLayouts(fit, callBack) {
// step-1 position child nodes
var parentNodes = cy.nodes(':parent');
var grid_layout = parentNodes.descendants().layout({
name: 'grid',
cols: 1,
fit: fit
});
grid_layout.promiseOn('layoutstop').then(function(event) {
// step-2 position parent nodes
var dagre_layout = parentNodes.layout({
name: 'dagre',
rankDir: 'TB',
fit: fit
});
dagre_layout.promiseOn('layoutstop').then(function(event) {
if (callBack) {
callBack.call(cy, event);
}
});
dagre_layout.run();
});
grid_layout.run();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.