antv g6对接后台数据_使用 G6关系图类库 开发流程图工具

1.从一个示例开始

插件：统一分层布局

::-webkit-scrollbar {

display: none;

}

html,

body {

overflow: hidden;

}

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();

首先需要一个DOM容器来创建与初始化图表,比如代码中的

1.jpg

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

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

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

新增圆

新增矩形

删除

给添加网格背景

//....

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: &#