dagre布局时，想要不同的datatype类型有不一样的样式 #4863

问题描述

需求：在dagre布局下，根据数据中dataType的类型，来渲染节点样式。 问题：我先是使用registerNode定义了不同类型的样式，然后再new Graph，但是我发现必须要定义defaultNode的类型，流程图才能正常渲染。

重现链接

无

重现步骤

// 复现代码 const data = { nodes: [ { id: '10', dataType: 'root', name: 'root', conf: [ { label: 'conf', value: 'pai_graph.conf', }, { label: 'dot', value: 'pai_graph.dot', }, { label: 'init', value: 'init.rc', }, ], }, { id: '1', dataType: 'root', 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: 'root', 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: 'sql', 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: 'sql', 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: 'sql', name: 'feature_extractor', conf: [ { label: 'conf', value: 'pai_graph.conf', }, { label: 'dot', value: 'pai_graph.dot', }, { label: 'init', value: 'init.rc', }, ], }, ], edges: [ // { // source: '2', // target: '11', // }, // { // source: '3', // target: '11', // }, { source: '10', 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', }, ], };

G6.registerNode( 'sql', { draw(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: '#5B8FF9', fontSize: 14, textAlign: 'center', textBaseline: 'middle', fontWeight: 'bold', }, name: 'text-shape', }); } return rect; }, }, 'single-node', );

G6.registerNode( 'root', { draw(cfg, group) { const rect = group.addShape('rect', { attrs: { x: -75, y: -25, width: 150, height: 50, radius: 10, stroke: '#cccccc', fill: '#aaa', lineWidth: 3, }, name: 'rect-shape', }); if (cfg.name) { group.addShape('text', { attrs: { text: cfg.name, x: 0, y: 0, fill: 'blue', 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: 'cubic-vertical', 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();

预期行为

希望root和sql类型，能根据registerNode中的定义来渲染

平台

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

屏幕截图或视频（可选）

No response

补充说明（可选）

No response