使用 G6关系图类库开发流程图工具

官网:https://antv.alipay.com/zh-cn/g6/1.x/index.html
注意:此教程基于1.x版本官方已更新到2.x,2.x重构了之前的代码。

1.从一个示例开始

我们先从官方示例 https://antv.alipay.com/zh-cn/g6/1.x/demo/other/plugin-dagre.html 开始学习如何使用G6

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>插件：统一分层布局</title>
    <style>
        ::-webkit-scrollbar {
            display: none;
        }

        html,
        body {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="mountNode"></div>
    <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
    <script src="https://gw.alipayobjects.com/os/antv/assets/g6/1.2.5/g6.min.js"></script>
    <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
    <script src="https://gw.alipayobjects.com/os/antv/assets/g6-plugins/1.0.1/g6-plugins.min.js"></script>
    <script type="text/javascript">
        const plugin = new G6.Plugins['layout.dagre']();
        const data = {
            nodes: [
                { id: '0', label: '起始', shape: 'circle', size: 40 },
                { id: '1', label: '步骤一' },
                { id: '2', label: '步骤二' },
                { id: '3', label: '条件' },
                { id: '4.1', label: '分步骤一' },
                { id: '4.2', label: '分步骤二' },
                { id: '5', label: '汇总' },
                { id: '6', label: '结束', shape: 'circle', size: 40 },
            ],
            edges: [
                { id: '0-1', source: '0', target: '1' },
                { id: '1-2', source: '1', target: '2' },
                { id: '2-3', source: '2', target: '3' },
                { id: '3-4.1', source: '3', target: '4.1' },
                { id: '3-4.2', source: '3', target: '4.2' },
                { id: '4.1-5', source: '4.1', target: '5' },
                { id: '4.2-5', source: '4.2', target: '5' },
                { id: '5-6', source: '5', target: '6' },
            ]
        };
        const net = new G6.Net({
            id: 'mountNode',               // dom id
            height: window.innerHeight,    // 画布高
            fitView: 'autoZoom',
            grid: null,
            plugins: [plugin],
        });
        net.source(data.nodes, data.edges);
        net.render();
    </script>
</body>
</html>

首先需要一个DOM容器来创建与初始化图表,比如代码中的<div id="mountNode"></div>

关于创建图表的参数说明可以参考文档https://antv.alipay.com/zh-cn/g6/1.x/api/graph.html我就不一一解释
创建后通过net.source(data.nodes, data.edges)加载数据源,其中数据源格式参考以下说明,文档在https://antv.alipay.com/zh-cn/g6/1.x/api/net.html#_source

1.jpg

最后是通过net.render()来渲染显示

2.实现新增删除节点功能

新增与删除官方示例:https://antv.alipay.com/zh-cn/g6/1.x/demo/other/crud.html

根据示例我们在之前代码基础上先添加按钮用于触发

<!-- 略.... -->
<body>
    <div id="toolBar" style="position: absolute;z-index: 10">
        <button id="addCircle">新增圆</button>
        <button id="addRect">新增矩形</button>
        <button id="delete">删除</button>
    </div>
    <div id="mountNode"></div>
<!-- 略.... -->

给添加网格背景

//....
const net = new G6.Net({
    id: 'mountNode',               // dom id
    height: window.innerHeight,    // 画布高
    fitView: 'autoZoom',
    grid: {//背景网格
        forceAlign: true, // 是否支持网格对齐
        cell: 10,         // 网格大小 
    },
    plugins: [plugin],
});
//....

然后就是绑定事件了(不过删除我更加习惯用键盘的delete进行删除)

//......
var i = 1;
$('#addCircle').on('click', () => {//添加圆形节点
    net.add('node', {
        shape: 'circle',
        id: 'id' + i++,
        x: 50 + i * 10,
        y: 50 + i * 10
    });
    net.refresh();
});

$('#addRect').on('click', () => {//添加矩形
    net.add('node', {
        shape: 'rect',
        id: 'id' + i++,
        x: 50 + i * 10,
        y: 50 + i * 10
    });
    net.refresh();
});

$('#delete').on('click', () => {//根据添加顺序删除
    if (i > 1) {
        i = i - 1;
        const item = net.find('id' + i);
        net.remove(item);
        net.refresh();
    }
});
//......

效果示例:

3.图编辑器效果

图编辑器官方示例:https://antv.alipay.com/zh-cn/g6/1.x/demo/other/editor.html

根据示例我们同样在之前代码基础上先添加按钮用于触发

<!-- 略.... -->
<body>
  <div id="toolBar" style="position: absolute;z-index: 10">
        <button id="addCircle">新增圆</button>
        <button id="addRect">新增矩形</button>
        <button id="delete">删除</button>
        <button id="addCustom1">自定义形1</button>
        <button id="addCustom2">自定义形2</button>
        <button id="addCustom3">自定义形3</button>
        <button id="addLine">添加直线</button>
        <button id="addArrowLine">添加箭头直线</button>
        <button id="addSmooth">添加曲线</button>
        <button id="drag">拖拽模式</button>
        <button id="edit">编辑模式</button>
        <button id="consoleJSON">输出json</button>
    </div>
    <div id="mountNode"></div>
<!-- 略.... -->

然后可以根据需要注册自定义节点(注册自定义节点文档:https://antv.alipay.com/zh-cn/g6/1.x/api/index.html#_registerNode)

//示例......
G6.registerNode('customNode1', {
    getAnchorPoints() {
        return [
            [0, 0.25],
            [0, 0.5],
            [0, 0.75],
            [1, 0.25],
            [1, 0.5],
            [1, 0.75],
            [0.25, 0],
            [0.5, 0],
            [0.75, 0],
            [0.25, 1],
            [0.5, 1],
            [0.75, 1]
        ];
    }
}, 'rect');
//......

然后就是绑定事件了

//......
$('#addCustom1').on('click', () => {//添加自定义节点图形
    net.beginAdd('node', {
        label: '[未定义]',
        shape: 'circle'
    });
});

$('#addCustom2').on('click', () => {//添加自定义节点图形
    net.beginAdd('node', {label: '[未定义]'});
});

$('#addCustom3').on('click', () => {//添加自定义节点图形
    net.beginAdd('node', {
        label: '[未定义]',
        shape: 'customNode1'//<====
    });
});

$('#addLine').on('click', () => {//添加普通直线
    net.beginAdd('edge', {
        shape: 'line'//<====
    });
});

$('#addArrowLine').on('click', () => {//添加箭头直线
    net.beginAdd('edge', {
        shape: 'arrow'//<====
    });
});

$('#addSmooth').on('click', () => {//添加曲线
    net.beginAdd('edge', {
        shape: 'smooth'//<====
    });
});

$('#drag').on('click', () => {//拖拽模式
    net.changeMode('drag');
});

$('#edit').on('click', () => {//编辑模式
    net.changeMode('edit');
});

$('#consoleJSON').on('click', () => {//控制台输入json
    const saveData = net.save();
    const json = JSON.stringify(saveData, null, 2);
    console.log(saveData, json); // eslint-disable-line no-console
});
//.....

效果示例:

4.保存为图片

官方示例:https://antv.alipay.com/zh-cn/g6/1.x/demo/other/html2canvas.html

添加按钮

<!-- 略 -->
<div id="toolBar" style="position: absolute;z-index: 10">
         <!-- 略 -->
        <button id="downloadImage">保存图片</button>        
    </div>
<!-- 略 -->

引入html2canvas插件,比如:

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>

事件绑定:

$("#downloadImage").on('click', (bool) => {
    const matrixStash = net.getMatrix(); // 缓存当前矩阵
    if (bool) {
        net.autoZoom(); // 图自动缩放以适应画布尺寸
    }
    html2canvas(net.get('graphContainer'), {
        onrendered(canvas) {
            const dataURL = canvas.toDataURL('image/png');
            const link = document.createElement('a');
            const saveName = '图片' + ('.png' || 'graph.png');//<====选中模块名称
            link.download = saveName;
            link.href = dataURL.replace('image/png', 'image/octet-stream');
            link.click();
            net.updateMatrix(matrixStash); // 还原矩阵
            net.refresh();
        }
    });
});

5.添加提示信息

官方示例:https://antv.alipay.com/zh-cn/g6/1.x/demo/other/tooltip-cfg.html

添加提示信息十分简单直接复制粘贴改改就行

//略.....
const net = new G6.Net({
   //略.....
});
net.source(data.nodes, data.edges);
net.tooltip({
    title: '节点信息', // @type {String} 标题
    split: ':',  // @type {String} 分割符号
    dx: 10,       // @type {Number} 水平偏移
    dy: 10        // @type {Number} 竖直偏移
});
net.node().tooltip(['id', 'label']);
net.edge().tooltip(['id']);
net.render();
//略.....

效果:

6.实现可编辑标签

可编辑标签可参考官网示例:https://antv.alipay.com/zh-cn/g6/1.x/demo/editor/mind.html
可编辑标签需要用到图表的事件,事件文档 https://antv.alipay.com/zh-cn/g6/1.x/api/graph.html#_on

以下是从官方示例里扣出来的代码,主要就是创建一个input输入框能同步显示到图表对应上方,然后对输入值进行同步绑定

<script> 
   var Util = G6.Util;
   var input = Util.createDOM('<input class="g6-label-input" />', {
       position: 'absolute',
       zIndex: 10,
       display: 'none'
   });

   function hasClass(shape, className) {
       if (shape) {
           const clasees = shape.get('class');
           if (clasees && clasees.indexOf(className) !== -1) {
               return true;
           }
       }
       return false;
   }

   function showInputLabel(node) {
       if (!node) {
           return;
       }
       const group = node.get('group');
       const label = group.findBy(function (child) {
           if (hasClass(child, 'label')) {
               return true;
           }
           return false;
       });
       const rootGroup = net.get('rootGroup');
       const bbox = Util.getBBox(label, rootGroup);
       const borderWidth = 1;
       const text = label.attr('text');
       clearAllActived();

       input.value = text;
       input.show();
       input.css({
           top: bbox.minY - borderWidth + 'px',
           left: bbox.minX - borderWidth + 'px',
           width: bbox.width + 'px',
           height: bbox.height + 'px',
           padding: '0px',
           margin: '0px',
           border: borderWidth + 'px solid #999'
       });
       input.focus();
       input.node = node;
   }

   function updateLabel() {
       if (input.visibility) {
           const node = input.node;
           clearAllActived();
           if (input.value !== node.get('model').name) {
               if (input.value) {
                   net.update(node, {
                       label: input.value
                   });
               }
           }
           input.hide();
       }
   }

   function clearAllActived() {
       net.clearAllActived();
       net.refresh(false);
   }
   input.hide = function () {
       input.css({
           display: 'none'
       });
       input.visibility = false;
   };
   input.show = function () {
       input.css({
           display: 'block'
       });
       input.visibility = true;
   };

   input.on('keydown', ev => {
       if (ev.keyCode === 13) {
           updateLabel();
       }
   });

   input.on('blur', () => {
       updateLabel();
   });
</script>

有了输入框我们只要绑定图表在什么事件下显示隐藏输入框就行了

//.......
const graphContainer = net.get('graphContainer');//获取图表内部容器
graphContainer.appendChild(input);//追加input输入框
graphContainer.oncontextmenu = function (e) { return false; }//阻止默认右键菜单
net.on('contextmenu', ev => {// 鼠标右键点击事件
    console.log("选中类型:", ev.itemType);
    console.log(ev);
});

net.on('itemmouseenter', ev => {//子项鼠标悬浮
    const item = ev.item;
    net.update(item, {
        color: 'red',
    });
    net.refresh();
});
net.on('itemmouseleave', ev => {//子项鼠标离开事件
    const item = ev.item;
    net.update(item, {
        color: null
    });
    net.refresh();
});
net.on('itemmousedown', ev => {//子项鼠标按下
    const item = ev.item;
    net.update(item, {
        color: '#9ef'
    });
});
net.on('itemmouseup', ev => {//子项鼠标弹起
    const item = ev.item;
    net.update(item, {
        color: 'null'
    });
});

net.on('dragmove', () => {//拖拽隐藏
    input.hide();
});

net.on('dblclick', ev => {//双击显示
    const item = ev.item;
    const shape = ev.shape;
    if (hasClass(shape, 'label') && item && item.get('type') === 'node') {//节点的情况下
        showInputLabel(item);
    }
});
//.......

效果:

7.布局方向

根据文档(https://antv.alipay.com/zh-cn/g6/1.x/api/plugins.html),统一分层布局有四个方向'TB', 'BT', 'LR', or 'RL' 默认值为 'TB',我没找到有啥实时函数能够修改布局方向,所以简单点那就每次初始化进行修改吧。

代码示例:

<!-- 略 -->
<body>
    <div id="toolBar" style="position: absolute;z-index: 10">
    <!-- 略 -->
    <button id="reLayout">自动布局</button>
        <label>视图方向:
            <select id="ViewLy">
                <option selected value="TB">上下</option>
                <option value="BT">下上</option>
                <option value="LR">左右</option>
                <option value="RL">右左</option>
            </select>
        </label>
    <!-- 略 -->
 <script type="text/javascript">
    /** 略 **/
    var data = {/** 略 **/};
    var net = null;
        function reLoadNet(v) {
            const layout_dagre = new G6.Plugins['layout.dagre']({
                rankdir: v,//可取值为： 'TB', 'BT', 'LR', or 'RL' 默认值为 'TB'
                //nodesep:10,//节点间距
                // useEdgeControlPoint:false,//生成边控制点 默认值为 true
            });
            if (net) {
                data = net.save().source;
                net.destroy();
                net = null
            };
            // preview.minimap = new G6.Plugins['tool.minimap']();
            net = new G6.Net({
                id: 'mountNode',              // 容器ID
                mode: 'edit',  // 编辑模式
                fitView: 'cc', // 自适应视口为左上 
                height: window.innerHeight,    // 画布高
                fitView: 'autoZoom',
                grid: {//背景网格
                    forceAlign: true, // 是否支持网格对齐
                    cell: 10,         // 网格大小 
                },
                plugins: [layout_dagre],
            });
            if (data) net.source(data.nodes, data.edges);
            const graphContainer = net.get('graphContainer');
            graphContainer.appendChild(input);
            graphContainer.oncontextmenu = function (e) { return false; }

            net.tooltip({
                title: '节点信息', // @type {String} 标题
                split: ':',  // @type {String} 分割符号
                dx: 10,       // @type {Number} 水平偏移
                dy: 10        // @type {Number} 竖直偏移
            });
            net.node().tooltip(['id', 'label']);
            net.edge().tooltip(['id', 'label']);
            net.render();
        }
        reLoadNet();
        /** 略 **/
       $("#reLayout").on('click', () => {
            var a = net.save();
            net.changeData();
            a.source.edges.forEach((v, i, a) => {
                delete v.x;
                delete v.y;
            });
            a.source.nodes.forEach((v, i, a) => {
                delete v.x;
                delete v.y;
            });
            net.source(a.source.nodes, a.source.edges);
            net.render();
        });
        $("#ViewLy").change(function(){
            reLoadNet(this.value);
        });
</script>
<!-- 略 -->

效果:

最终代码效果: http://runjs.cn/detail/92edwvz9

使用 G6关系图类库 开发流程图工具