g6-in-react icon indicating copy to clipboard operation
g6-in-react copied to clipboard

layout设定为dagre并且rankDir是LR时不会自动换到下一行?

Open Colstuwjx opened this issue 4 years ago • 1 comments

如图:

image

希望的效果是最后一个节点 node5 能够换到新的一行展示,然后连线到 node4。

Colstuwjx avatar Jan 14 '20 10:01 Colstuwjx

代码设置如下:

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

Colstuwjx avatar Jan 14 '20 10:01 Colstuwjx