Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Colstuwjx opened this issue Jan 14, 2020 · 1 comment

Comments

@Colstuwjx
Copy link

如图:

image

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

@Colstuwjx
Copy link
Author

代码设置如下:

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant