dagre流程图，可以控制某个节点作为一个描述的节点，不在流程的任何一个层级里面吗 #4946

问题描述

希望流程布局对齐时能把红框的2个节点排除在外

重现链接

无

重现步骤

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', layer: 0, },

{
  id: '3',
  dataType: 'alps',
  name: 'alps_file3',
  layer: 2,
},
{
  id: '4',
  dataType: 'sql',
  name: 'sql_file4',
  layer: 3,
},
{
  id: '5',
  dataType: 'sql',
  name: 'sql_file5',

}, {
  id: '2',
  dataType: 'alps',
  name: 'alps_file2',
  layer: 2,
},
{
  id: '6',
  dataType: 'feature_etl',
  name: 'feature_etl_6',

},
{
  id: '7',
  dataType: 'feature_etl',
  name: 'feature_etl_7',

},
{
  id: '8',
  dataType: 'feature_extractor',
  name: 'feature_extractor8',

},
{
  id: '9',
  dataType: 'feature_extractor',
  name: 'feature_extractor9',
  layer: 1,
},
{
  id: '10',
  dataType: 'feature_extractor',
  name: 'feature_extractor10',
  layer: 1,

},
{

  id: '11',
  dataType: 'feature_extractor',
  name: 'feature_extractor11',
  // layer: 5,
  layer: 2,

},

], edges: [ { source: '1', target: '2', }, { source: '1', target: '9', type: 'cubic-horizontal' }, { source: '1', target: '10', type: 'cubic-horizontal' }, { source: '1', target: '11', // type: 'cubic-horizontal'

},
{
  source: '11',
  target: '4',
  // type: 'cubic-horizontal'

},
{
  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: '11',
  target: '7',
},
{
  source: '2',
  target: '7',
},

], };

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: { pipes: [ { type: 'dagre', // nodesFilter: (node) => node.id !== '9'&&node.id !== '10', rankdir: 'BT', nodesepFunc: (d) => { if (d.id === '3') { return 500; } return 50; }, // align: 'DL', // ranksep: 70, controlPoints: true, }, // { // type: 'force', // nodesFilter: (node) => node.id == '9'||node.id == '10', // rankdir: 'BT', // ranksep: 70,

  // }
]

}, 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',

],

}, 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