Javascript cytoscape.js dagre布局中的节点最大大小?
我正在构建的项目的一个主要部分涉及允许用户流畅地创建和编辑DAG。我正在使用React、cytoscape.js、cytoscape edgehandles和dagre布局来完成这项工作,除了一个恼人的问题外,它工作得非常好。当图形只有几个节点时,节点是巨大的 这是因为我在布局选项中将“拟合”设置为true(默认值)。我需要保持此设置,因为随着图形的增长,我希望它们缩小以适合,除非用户选择放大。我只是不希望前1-4个节点太大!有没有办法为节点定义一个最大高度/宽度,或者控制缩放级别,这样节点就可以以一个合理的大小开始,只有在必要的时候才开始变小 以下是我的布局:Javascript cytoscape.js dagre布局中的节点最大大小?,javascript,cytoscape.js,Javascript,Cytoscape.js,我正在构建的项目的一个主要部分涉及允许用户流畅地创建和编辑DAG。我正在使用React、cytoscape.js、cytoscape edgehandles和dagre布局来完成这项工作,除了一个恼人的问题外,它工作得非常好。当图形只有几个节点时,节点是巨大的 这是因为我在布局选项中将“拟合”设置为true(默认值)。我需要保持此设置,因为随着图形的增长,我希望它们缩小以适合,除非用户选择放大。我只是不希望前1-4个节点太大!有没有办法为节点定义一个最大高度/宽度,或者控制缩放级别,这样节点就可
cy.layout({
名称:“dagre”,
ranker:“最长路径”,
填充:15
}).run()代码>您始终可以这样定义节点:
style: [
{
selector: 'node',
style: {
'shape': 'data(faveShape)',
'content': 'data(DisplayName)',
'height': 'data(faveHeight)',
'width': 'data(faveWidth)',
'background-color': 'data(faveColor)',
'line-color': '#a8eae5',
'font-family': 'Segoe UI',
'font-size': '15px',
}
}
]
如果这样做,可以检查要添加到cytoscape窗口的节点数,然后根据要添加的节点数定义其宽度和高度属性:
jsonNew.push({
data: {
id: yourId,
parent: '',
faveShape: 'yourShape',
faveHeight: ((nodes.length > 7) ? nodes.length * 3 : nodes.length * 6),
faveWidth: ((nodes.length > 7) ? nodes.length * 5 : nodes.length * 10),
faveColor: '#ffffff'
},
position: {
x: '',
y: ''
},
parents: '',
group: 'nodes',
removed: false,
selected: false,
selectable: true,
locked: false,
grabbable: true,
classes: ''
});