【前端学习】AntV G6-01 创建一个简单的图

四喜花露水

已于 2024-07-14 16:49:17 修改

阅读量195

点赞数 2

分类专栏： AntV G6 文章标签：前端 javascript

于 2024-07-13 21:08:28 首次发布

本文链接：https://blog.csdn.net/gaowxx/article/details/140406387

版权

AntV G6 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

课程链接：

AntV G6 系列课程第 2 集：创建一个简单的图_哔哩哔哩_bilibili

本文章是关于如何使用AntV G6创建一个简单的图，B站的官方课程在该视频中提及了一般图与树图的异同点，同时也带领初学者了解G6部分API的使用。

资料：

快速上手 | G6 (antgroup.com)

G6 核心概念总览 | G6 (antgroup.com)

图配置 G6.Graph(cfg) | G6 (antgroup.com)

所有图表 | G6 (antgroup.com)

一般图 00:43

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>01 一般图</title>
		<!-- 引入 G6 -->
		<script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>
	</head>
	<body>
		<div id="container"></div>
		<script>
			const data = {
				nodes: [{
						id: '1',
						label: 'node-1',
						type: 'rect',
						x: 100,
						y: 200,
						size: [50, 25],
						style: {
							fill: '#f00',
							stroke: '#0f0',
							lineWidth: 5,
							fillOpacity: 0.4,
							strokeOpacity: 0.8
						}
					},
					{
						id: '2',
						label: '这是节点2',
						labelCfg: {
							position: 'bottom',
							style: {
								fill: '#00f',
								fontWeight: 500,
								textAlign: 'left'
							}
						}
					},
					{
						id: '3',
						label: 'node-3'
					}
				],
				edges: [{
						source: '1',
						target: '2',
						style: {
							// endArrow: true,
							endArrow: {
								path: G6.Arrow.triangle(10, 20, 25),
								d: 25,
								fill: 'pink'
							},
							// startArrow: true
							startArrow: {
								path: 'M 0,0 L 20,10 L 20,-10 Z',
								d: 5,
								fill: '#f00',
								stroke: '#0f0',
								opacity: 0.5,
								lineWidth: 3,
								// ...
							},
						}
					},
					{
						source: '2',
						target: '3'
					},
					{
						source: '3',
						target: '1'
					}
				]
			}

			const width = document.getElementById('container').scrollWidth
			const height = document.getElementById('container').scrollHeight || 500

			// 小图
			const minimap = new G6.Minimap
			console.log(minimap);

			const graph = new G6.Graph({
				container: 'container',
				width,
				height,
				defaultNode: {
					type: 'ellipse',
					style: {
						fill: '#ff0'
					}
				},
				defaultEdge: {
					// ...
				},
				fitView: true,
				fitViewPadding: 100,
				// 模式
				modes: {
					// 拖拽画布 drag-canvas
					// 拖拽节点 drag-node 
					// 缩放画布 zoom-canvas
					default: [{
						type: 'drag-canvas', // 可以按这个格式写成对象的形式
						direction: 'x'
					}, 'drag-node', 'zoom-canvas'],
					edit: ['drag-canvas', 'zoom-canvas', 'click-select'],
					edit2: ['drag-node'],
				},
				plugins: [minimap]

			})
			// graph.setMode('edit')  // 切换模式

			graph.data(data)
			graph.render()
		</script>
	</body>
</html>

树图 05:02

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>02 树图</title>
		<!-- 引入 G6 -->
		<script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>
	</head>
	<body>
		<div id="container"></div>
		<script>
			const treeData = {
				id: 'root',
				label: 'root',
				children: [{
						id: 'node-1',
						label: 'node-1'
					},
					{
						id: 'node-2',
						label: 'node-2'
					},
					{
						id: 'node-3',
						label: 'node-3',
						children: [{
							id: 'node-4',
							label: 'node-4'
						}]
					},
				]
			};

			const container = document.getElementById('container');
			const width = container.scrollWidth;
			const height = container.scrollHeight || 500;
			const graph = new G6.TreeGraph({
				container: 'container',
				width,
				height,
				modes: {
					default: [{
							// 子节点的展开收起
							type: 'collapse-expand',
							onChange: function onChange(item, collapsed) {
								const data = item.getModel();
								data.collapsed = collapsed;
								return true;
							},
						},
						'drag-canvas',
						'zoom-canvas',
					],
				},
				defaultNode: {
					size: 26,
					anchorPoints: [
						[0, 0.5],
						[1, 0.5],
					],
				},
				defaultEdge: {
					type: 'cubic-horizontal',
				},
				layout: {
					type: 'compactBox',
					direction: 'LR',

				},
			});

			graph.node(function(node) {
				return {
					label: node.id,
					labelCfg: {
						offset: 10,
						position: node.children && node.children.length > 0 ? 'left' : 'right',
					},
				};
			});

			graph.data(treeData);
			graph.render();
			graph.fitView();
		</script>
	</body>
</html>