IssueHunt使用 'comboCombined' 和 dagre 布局， dagre 的ranksep 不生效。 #4633
kongfuziyue posted onGitHub
问题描述
使用 'comboCombined' 和 dagre 布局后， dagre 的ranksep 属性不生效。
重现链接
G6官网示例代码的右边粘贴代码运行
重现步骤
import G6 from '@antv/g6'; const data = { nodes: [ { id: '0', label: '0', comboId: 'A', }, { id: '1', label: '1', comboId: 'C', }, { id: '2', label: '2', comboId: 'C', }, { id: '3', label: '3', comboId: 'D', }, { id: '4', label: '4', comboId: 'A', }, { id: '5', label: '5', comboId: 'B', }, { id: '6', label: '6', comboId: 'A', }, { id: '7', label: '7', comboId: 'C', }, { id: '8', label: '8', comboId: 'C', }, { id: '9', label: '9', comboId: 'A', }, { id: '10', label: '10', comboId: 'B', }, { id: '11', label: '11', comboId: 'B', }, { id: '12', label: '12', comboId: 'D', }, { id: '13', label: '13', comboId: 'D', }, ],
combos: [ { id: 'A', label: 'combo A', 'layer' : 1, style: { fill: '#C4E3B2', stroke: '#C4E3B2', }, }, { id: 'B', label: 'combo B', 'layer' : 1, style: { stroke: '#99C0ED', fill: '#99C0ED', }, }, { id: 'C', label: 'combo C', 'layer' : 2, style: { stroke: '#eee', fill: '#eee', }, }, { id: 'D', label: 'combo D','layer' : 2, style: { stroke: '#eee', fill: '#eee', }, }, ], };
data.nodes.forEach((node) => { switch (node.ComboId) { case 'A': node.style = { fill: '#C4E3B2', stroke: '#aaa', }; break; case 'B': node.style = { fill: '#99C0ED', stroke: '#aaa', }; break; case 'C': node.style = { fill: '#eee', stroke: '#aaa', }; break; default: node.style = { fill: '#FDE1CE', stroke: '#aaa', }; break; } });
let sortByCombo = false; const descriptionDiv = document.createElement('button'); descriptionDiv.innerHTML = 'Enable sortByCombo'; const container = document.getElementById('container'); container.appendChild(descriptionDiv);
descriptionDiv.addEventListener('click', (e) => {
sortByCombo = !sortByCombo;
descriptionDiv.innerHTML = sortByCombo ? 'Disable sortByCombo' : 'Enable sortByCombo';
graph.updateLayout({
sortByCombo,
});
});
const width = container.scrollWidth;
const height = (container.scrollHeight || 500) - 30;
const graph = new G6.Graph({
container: 'container',
width,
height: height - 50,
fitView: true,
fitViewPadding: 30,
animate: true,
groupByTypes: false,
modes: {
default: [
'drag-combo',
'drag-node',
'drag-canvas',
{
type: 'collapse-expand-combo',
relayout: false,
},
],
},
layout: {
type: 'comboCombined',
sortByCombo: true,
outerLayout: new G6.Layout['dagre']({
rankdir: 'TB',
nodesep: 20,
ranksep: 1,
}),
innerLayout: new G6.Layout['dagre']({
preventOverlap: true,
nodesep: 1,
}),
},defaultNode: { size: [60, 30], type: 'rect', // anchorPoints: [[0.5, 0], [0.5, 1]] }, defaultEdge: { type: 'line', }, defaultCombo: { type: 'rect', style: { fillOpacity: 0.1, fixSize: 20 }, }, }); graph.data(data); graph.render();
console.log('comboTrees', graph.get('comboTrees'))
if (typeof window !== 'undefined') window.onresize = () => { if (!graph || graph.get('destroyed')) return; if (!container || !container.scrollWidth || !container.scrollHeight) return; graph.changeSize(container.scrollWidth, container.scrollHeight - 30); };
预期行为
已将outerLayout 里的rankdir 设为1， 期望上下combo之间的距离很小， 但实际上比较大：
平台
版本均为最新
屏幕截图或视频（可选）
No response
补充说明（可选）
No response
