dagre流程图，可以控制某个节点和另外一个节点同一层级吗 #4892

问题描述

希望新增的节点9与sql_file2同一级

重现链接

无

重现步骤

示例代码 import G6 from '@antv/g6'; import insertCss from 'insert-css';

insertCss(.g6-tooltip { border-radius: 6px; font-size: 12px; color: #fff; background-color: #000; padding: 2px 8px; text-align: center; });

const data = { nodes: [ { id: '1', dataType: 'alps', name: 'alps_file1', conf: [ { label: 'conf', value: 'pai_graph.conf', }, { label: 'dot', value: 'pai_graph.dot', }, { label: 'init', value: 'init.rc', }, ], }, { id: '2', dataType: 'alps', name: 'alps_file2', conf: [ { label: 'conf', value: 'pai_graph.conf', }, { label: 'dot', value: 'pai_graph.dot', }, { label: 'init', value: 'init.rc', }, ], }, { id: '3', dataType: 'alps', name: 'alps_file3', conf: [ { label: 'conf', value: 'pai_graph.conf', }, { label: 'dot', value: 'pai_graph.dot', }, { label: 'init', value: 'init.rc', }, ], }, { id: '4', dataType: 'sql', name: 'sql_file1', conf: [ { label: 'conf', value: 'pai_graph.conf', }, { label: 'dot', value: 'pai_graph.dot', }, { label: 'init', value: 'init.rc', }, ], }, { id: '5', dataType: 'sql', name: 'sql_file2', conf: [ { label: 'conf', value: 'pai_graph.conf', }, { label: 'dot', value: 'pai_graph.dot', }, { label: 'init', value: 'init.rc', }, ], }, { id: '6', dataType: 'feature_etl', name: 'feature_etl_1', conf: [ { label: 'conf', value: 'pai_graph.conf', }, { label: 'dot', value: 'pai_graph.dot', }, { label: 'init', value: 'init.rc', }, ], }, { id: '7', dataType: 'feature_etl', name: 'feature_etl_1', conf: [ { label: 'conf', value: 'pai_graph.conf', }, { label: 'dot', value: 'pai_graph.dot', }, { label: 'init', value: 'init.rc', }, ], }, { id: '8', dataType: 'feature_extractor', name: 'feature_extractor', conf: [ { label: 'conf', value: 'pai_graph.conf', }, { label: 'dot', value: 'pai_graph.dot', }, { label: 'init', value: 'init.rc', }, ], }, { id: '9', dataType: 'feature_extractor', name: '9', conf: [ { label: 'conf', value: 'pai_graph.conf', }, { label: 'dot', value: 'pai_graph.dot', }, { label: 'init', value: 'init.rc', }, ], } ], edges: [ { source: '1', target: '2', }, { source: '1', target: '3', }, { source: '2', target: '4', }, { source: '3', target: '4', }, { source: '4', target: '5', }, { source: '5', target: '6', }, { source: '6', target: '7', }, { source: '6', target: '8', }, { source: '9', target: '8', }, { source: '4', target: '9', }, ], };

G6.registerNode( 'sql', { drawShape(cfg, group) { const rect = group.addShape('rect', { attrs: { x: -75, y: -25, width: 150, height: 50, radius: 10, stroke: '#5B8FF9', fill: '#C6E5FF', lineWidth: 3, }, name: 'rect-shape', }); if (cfg.name) { group.addShape('text', { attrs: { text: cfg.name, x: 0, y: 0, fill: '#00287E', fontSize: 14, textAlign: 'center', textBaseline: 'middle', fontWeight: 'bold', }, name: 'text-shape', }); } return rect; }, }, 'single-node', );

const container = document.getElementById('container'); const width = container.scrollWidth; const height = container.scrollHeight || 500; const graph = new G6.Graph({ container: 'container', width, height, layout: { type: 'dagre', nodesepFunc: (d) => { if (d.id === '3') { return 500; } return 50; }, ranksep: 70, controlPoints: true, }, defaultNode: { type: 'sql', }, defaultEdge: { type: 'polyline', style: { radius: 20, offset: 45, endArrow: true, lineWidth: 2, stroke: '#C2C8D5', }, }, nodeStateStyles: { selected: { stroke: '#d9d9d9', fill: '#5394ef', }, }, modes: { default: [ 'drag-canvas', 'zoom-canvas', 'click-select', { type: 'tooltip', formatText(model) { const cfg = model.conf; const text = []; cfg.forEach((row) => { text.push(row.label + ':' + row.value + '<br>'); }); return text.join('\n'); }, offset: 30, }, ], }, fitView: true, }); graph.data(data); graph.render();

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); };

预期行为

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• G6 版本: [4.5.1 ... ]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response