Colstuwjx
commented
4 years ago 代码设置如下：
graph = new G6.Graph({
container: ref.current,
width: 800,
height: 800,
layout: {
type: 'dagre',
rankdir: 'LR',
},
defaultNode: {
shape: 'modelRect',
stateIcon: {
show: false,
},
labelCfg: {
style: {
fill: '#000000A6',
fontSize: 10,
},
},
},
defaultEdge: {
shape: 'polyline',
},
});数据部分：
import loading from 'assets/loading.png';
import seleted from 'assets/seleted.png';
import alert from 'assets/alert.png';
export const data = {
nodes: [
{
id: 'node1',
label: '执行模块1',
// x: 100,
// y: 200,
description: '这是一段描述信息',
logoIcon: {
show: true,
img: loading,
},
style: {
stroke: '#afa52a',
width: 150,
},
},
{
id: 'node2',
label: '执行模块2',
// x: 200,
// y: 200,
description: '这是一段描述信息2222',
logoIcon: {
show: true,
img: seleted,
},
style: {
stroke: '#72CC4A',
width: 150,
},
},
{
id: 'node3',
label: '执行模块3',
// x: 300,
// y: 200,
description: '这是一段描述信息3333',
logoIcon: {
show: true,
img: alert,
},
style: {
stroke: '#e21b1b',
width: 150,
},
},
{
id: 'node4',
label: '执行模块4',
// x: 300,
// y: 200,
description: '这是一段描述信息4444',
logoIcon: {
show: true,
img: alert,
},
style: {
stroke: '#e21b1b',
width: 150,
},
},
{
id: 'node5',
label: '执行模块5',
x: 100,
y: 300,
description: '这是一段描述信息5555',
logoIcon: {
show: true,
img: alert,
},
style: {
stroke: '#e21b1b',
width: 150,
},
},
],
edges: [
{
source: 'node1',
target: 'node2',
},
{
source: 'node2',
target: 'node3',
},
{
source: 'node3',
target: 'node4',
},
{
source: 'node4',
target: 'node5',
},
],
};
如图：
希望的效果是最后一个节点 node5 能够换到新的一行展示，然后连线到 node4。