x6.js 流程图绘制笔记，常用函数

官方参考网站如下：https://antv-x6.gitee.io/zh/docs/tutorial/about

目录

安装x6

创建绘制区域

 插入数据并渲染

添加新节点

删除节点

连接节点

连接桩

设置快捷键

Graph内置常用函数

根据id获取节点对象

获取整个节点json

复制函数

粘贴函数

销毁Graph

节点内置函数

更新节点

 guiplan开发工具，可视化开发一键使用

常见问题

---

安装x6

输入以下命令

 npm install @antv/x6 --save

引用插件代码如下：

import { Graph } from '@antv/x6';

创建绘制区域

this.guiX6 = new Graph({
    container: document.querySelector('.guix6'),
    width: 800,
    height: 600,
    background: {
    color: '#fffbe6', // 设置画布背景颜色
    },
    grid: {
        size: 10,      // 网格大小 10px
        visible: true, // 渲染网格背景
    },
  });
  

 插入数据并渲染

this.guiX6.fromJSON({
  // 节