visjs笔记-将edges(边)分开(防止重叠)

x33g5p2x  于2022-06-16 转载在 其他  
字(1.0k)|赞(0)|评价(0)|浏览(435)

也就是从这个效果:

变成这种效果:

代码是从这样的:

let edges = new vis.DataSet([
                {
                    from: 1,
                    to: 2,
                    label: '<b>①用户提交表单</b>'
                },
                {
                    from: 2,
                    to: 3,
                    label: '<b>②验证并提交数据</b>'
                },
                {
                    from: 3,
                    to: 4,
                    smooth: {type: 'curvedCW', roundness: 0.5},
                    label: '<b>③分析数据调用模块</b>'
                },
                {
                    from: 4,
                    to: 3,
                    label: '<b>④结果以Base64返回</b>'
                },
                {
                    from: 3,
                    to: 2,

                    label: '<b>⑤结果以Json形式返回</b>'
                },
                {
                    from: 2,
                    to: 1,
                    label: '<b>⑥头像返回给用户</b>'
                }
            ]);

改成这样的:

let edges = new vis.DataSet([
                {
                    from: 1,
                    to: 2,
                    smooth: {type: 'curvedCW', roundness: 0.5},
                    label: '<b>①用户提交表单</b>'
                },
                {
                    from: 2,
                    to: 3,
                    smooth: {type: 'curvedCW', roundness: 0.5},
                    label: '<b>②验证并提交数据</b>'
                },
                {
                    from: 3,
                    to: 4,
                    smooth: {type: 'curvedCW', roundness: 0.5},
                    label: '<b>③分析数据调用模块</b>'
                },
                {
                    from: 4,
                    to: 3,
                    smooth: {type: 'curvedCW', roundness: 0.5},
                    label: '<b>④结果以Base64返回</b>'
                },
                {
                    from: 3,
                    to: 2,
                    smooth: {type: 'curvedCW', roundness: 0.5},
                    label: '<b>⑤结果以Json形式返回</b>'
                },
                {
                    from: 2,
                    to: 1,
                    smooth: {type: 'curvedCW', roundness: 0.5},
                    label: '<b>⑥头像返回给用户</b>'
                }
            ]);

其实就是添加好roundness和curvedCW即可。

相关文章