道招

antv G6流程图darge实现节点回溯连线

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

antv G6流程图darge实现节点回溯连线

需要实现的效果就是这样 file

里面红线部分就是需要回溯的连线, 我们知道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();

此时的图是这样的 file

如果需要节点8再回溯到节点5的话,只需要加入一条边edge

javascript
{
    source: '8',
    target: '5',
}

但是这个时候很可能会引起一些布局的变化,比如变成这样 file

节点确实连接在一起了,但是中间的节点6的布局发生了少许变化,如果我们希望布局保持不变,同时节点8和节点5连在一起,怎么办呢?

render完再添加连线,对,就是这样。

graph.data(data);
graph.render();
graph.addItem("edge", {
  source: "8",
  target: "5",
  lineColor: '#F08080',
  type: 'flow-back-line'
});

file

大功告成!

更新时间:
上一篇:wangEditor富文本编辑器改造记录之一——了解wangEditor结构下一篇:Vue同一路由跳转页面不刷新解决方案及注意事项

相关文章

web前端开源流程图组件库调研记录

前期公司的一个项目需要绘制流程图,设计师给的效果大致是这样的 对,全是马赛克。 项目的大致要求如下: 点击流程节点后会弹出对应的流程详情,可以查看和编辑 最好是支持流程节 阅读更多…

web前端开源流程图组件库调研记录

前期公司的一个项目需要绘制流程图,设计师给的效果大致是这样的 对,全是马赛克。 项目的大致要求如下: 点击流程节点后会弹出对应的流程详情,可以查看和编辑 最好是支持流程节 阅读更多…

关注道招网公众帐号
道招开发者二群