antv G6流程图darge实现节点回溯连线
如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!
antv G6流程图darge实现节点回溯连线
需要实现的效果就是这样
里面红线部分就是需要回溯的连线, 我们知道darge流程图连接节点是这样实现的
const data = {
nodes: [
{
id: '1',
dataType: 'alps',
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: 'alps',
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: 'feature_etl',
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: 'feature_etl',
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: 'feature_extractor',
name: 'feature_extractor',
conf: [
{
label: 'conf',
value: 'pai_graph.conf',
},
{
label: 'dot',
value: 'pai_graph.dot',
},
{
label: 'init',
value: 'init.rc',
},
],
},
],
edges: [
{
source: '1',
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',
},
// {
// source: '8',
// target: '5',
// },
],
};
const graph = new G6.Graph({
... 其它配置
layout: {
type: "dagre",
nodesepFunc: (d) => {
if (d.id === "3") {
return 500;
}
return 50;
},
ranksep: 70,
controlPoints: true
},
});
graph.data(data);
graph.render();
此时的图是这样的
如果需要节点8再回溯到节点5的话,只需要加入一条边edge
javascript
{
source: '8',
target: '5',
}
但是这个时候很可能会引起一些布局的变化,比如变成这样
节点确实连接在一起了,但是中间的节点6的布局发生了少许变化,如果我们希望布局保持不变,同时节点8和节点5连在一起,怎么办呢?
render完再添加连线,对,就是这样。
graph.data(data);
graph.render();
graph.addItem("edge", {
source: "8",
target: "5",
lineColor: '#F08080',
type: 'flow-back-line'
});
大功告成!
- 分类:
- Web前端
更新时间:
相关文章
web前端开源流程图组件库调研记录
前期公司的一个项目需要绘制流程图,设计师给的效果大致是这样的 对,全是马赛克。 项目的大致要求如下: 点击流程节点后会弹出对应的流程详情,可以查看和编辑 最好是支持流程节 阅读更多…
web前端开源流程图组件库调研记录
前期公司的一个项目需要绘制流程图,设计师给的效果大致是这样的 对,全是马赛克。 项目的大致要求如下: 点击流程节点后会弹出对应的流程详情,可以查看和编辑 最好是支持流程节 阅读更多…