前言
G6是支付宝前端团队推出的一款功能强大、易于使用的JavaScript图形库。在这篇博客中，我将介绍如何使用G6创建一个简单的流程图。
初体验
首先，我们需要准备好流程图数据。
在这个例子中，我们使用JSON格式来表示流程图，并为每个节点定义了其id、名称、类型和位置信息。例如：
const flowData = {
//节点
nodes: [
{ id: '001', name: '张三', type: 'node', x: 50, y: 100 },
{ id: '002', name: '李四', type: 'node', x: 150, y: 100 },
{ id: '003', name: '王五', type: 'node', x: 250, y: 100 },
{ id: '004', name: '老六', type: 'node', x: 350, y: 100 }
],
//关系
edges: [
{ source: '001', target: '002' },
{ source: '001', target: '003' },
{ source: '002', target: '004' }
]
};
接下来，我们需要在HTML中创建一个容器元素，并设置其宽度和高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>G6.js 初体验</title>
<script src="https://gw.alipayobjects.com/os/antv/assets/g6/4.2.9/g6.min.js"></script>
</head>
<body>
<div id="g6-container" style="width: 500px; height: 300px;"></div>
<script>
const container = document.getElementById('g6-container');
</script>
</body>
</html>
然后，我们可以使用G6中的Graph类来创建一个流程图实例，并设置其容器、宽度和高度。
const graph = new G6.Graph({
container,
width: 500,
height: 300,
modes: {
default: ['drag-canvas', 'zoom-canvas']
}
});
在上面的代码中，我们还为流程图添加了两种交互模式：拖拽和缩放。这将允许用户通过拖动和缩放视图来浏览流程图。
接下来，我们可以使用graph.data()方法将流程图数据加载到图形中，并使用graph.render()方法呈现图形。我们还可以为节点和连线定义样式，以及为节点和连线添加标签。
graph.data(flowData);
graph.render();
graph.node(node => {
return {
shape: 'rect',
label: node.name,
style: {
fill: '#fff',
stroke: '#000'
}
};
});
graph.edge(edge => {
return {
shape: 'polyline',
label: edge.type,
style: {
stroke: '#1890ff',
lineWidth: 2
}
};
});
在上面的代码中，我们为节点使用矩形形状和名称标签，为连线使用折线形状和类型标签。我们还设置了节点和连线的样式，例如填充和边框颜色。
最后，我们可以添加事件处理程序来进行交互。例如，我们可以定义一个单击事件处理程序，以便在单击节点时弹出一个提示框。
graph.on('node:click', e => {
const node = e.item;
const name = node.getModel().name;
alert(`Hello "${name}"`);
});
总结
在本篇博客中，我们介绍了如何使用G6创建一个简单的流程图。我们学习了如何加载数据、呈现图形、定义样式和添加事件处理程序。G6是一个功能强大且易于使用的JavaScript图形库，可以帮助开发人员创建出各种各样的可视化应用程序。
原文链接：https://juejin.cn/post/7221820151397548069 作者：爱划水de鲸鱼哥
