antv/x6、G6绘图 2.2.1

m0_45127388

已于 2024-04-29 14:00:30 修改

阅读量2.2k

点赞数 1

分类专栏：基础文章标签： javascript 前端 ui

于 2023-03-01 15:41:07 首次发布

本文链接：https://blog.csdn.net/m0_45127388/article/details/129280413

版权

基础专栏收录该内容

33 篇文章

订阅专栏

X6是一个强大的图编辑引擎，支持SVG和HTML定制，提供多种内置扩展，适用于流程图、DAG图等的构建。用户可以轻松初始化画布，自定义节点样式和交互，同时具备数据驱动和事件驱动的特性，便于数据逻辑和业务逻辑处理。文章涵盖了安装、使用、画布配置、节点和边的绘制以及交互设置等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网址：https://x6.antv.antgroup.com/
文档：https://x6.antv.antgroup.com/tutorial/about
API：https://x6.antv.antgroup.com/api/graph/graph
praph配置：https://x6.antv.antgroup.com/api/graph/graph#connecting

介绍：X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用
特性
🌱 　极易定制：支持使用 SVG/HTML/React/Vue 定制节点样式和交互；
🚀 　开箱即用：内置 10+ 图编辑配套扩展，如框选、对齐线、小地图等；
🧲 　数据驱动：基于 MVC 架构，用户更加专注于数据逻辑和业务逻辑；
💯 　事件驱动：可以监听图表内发生的任何事件。
一、安装

$ npm install @antv/x6 --save
$ yarn add @antv/x6

二、开始使用
1、初始化画布:在页面中创建一个画布容器，然后初始化画布对象，可以通过配置设置画布的样式，比如背景颜色

// 项目中 <div ref="graphStencil" class="graph-stencil" @mouseup.native.stop></div>
<div id="container"></div>
import { Graph } from "@antv/x6";
const graph = new Graph({
  container: document.getElementById("container"),
  width: 800,
  height: 600,
  background: {
    color: "#F2F7FA",
  },
});

2、绘制节点和边
3、使用插件
4、数据导出
三、基础
1、画布
（1）画布大小，可以设置width height,不设置以画布容器大小初始化画布，在项目实践中，经常会遇到下面两种场景：1）画布容器还没有渲染完成（此时尺寸为 0），就实例化画布对象，导致画布元素显示异常。2）页面的 resize 导致画布容器大小改变，导致画布元素显示异常。可以使用 autoResize 配置来解决上述问题。

<div style="width=100%; height=100%">
  <div id="container"></div>
</div>

const graph = new Graph({
  container: document.getElementById("container"),
  autoResize: true,  // 自动调整画布大小
  grid: true, // 使用网格
  mousewheel: {
			enabled: true,  // 是否开启滚轮缩放交互
			zoomAtMousePosition: true,  // 是否将鼠标位置作为中心缩放
			modifiers: 'ctrl', // 修饰键('alt'、'ctrl'、'meta'、'shift')，设置修饰键后需要按下修饰键并滚动鼠标滚轮时才触发画布缩放。通过设置修饰键可以解决默认滚动行为与画布缩放冲突问题
			minScale: 0.5,
			maxScale: 3,
		},
});

（2）画布背景及网格：通过 background 和 grid 两个配置来设置画布的背景以及网格
（3）缩放和平移：panning 和 mousewheel 配置来实现这两个功能，鼠标按下画布后移动时会拖拽画布，滚动鼠标滚轮会缩放画布
2、节点
节点渲染方式：
（1）如果节点内容比较简单，而且需求比较固定，使用 SVG 节点
（2）其他场景，都推荐使用当前项目所使用的框架来渲染节点

添加节点
内置节点
定制节点：通过 markup 和 attrs 来定制节点的形状和样式，markup 可以类比 HTML，attrs 类比 CSS

// 表示包含rect image text 三个 SVG 元素，渲染到页面之后，节点对应的 SVG 元素类似3个标签
markup: [
		{
			tagName: 'rect', // SVG/HTML 元素标签名
			selector: 'body', // 该元素的选择器（唯一），通过选择器来定位该元素或为该元素指定属性样式
		},
		{
			tagName: 'image',
			selector: 'image',
		},
		{
			tagName: 'text',
			selector: 'label',
		},
	],

attrs: {
		body: {
			strokeWidth: 1,
			stroke: '#bababa',
			fill: '#EFF4FF',
		},
		image: {
			width: 18,
			height: 18,
			refX: 6,
			refY: 6,
			color: '#fff',
		},
		label: {
			refX: '50%',
			refY: '50%',
			textAnchor: 'middle',
			textVerticalAnchor: 'middle',
			fontSize: 12,
			fill: '#262626',
		},
	},
	ports: {
		groups: {
			top: {
				position: 'top',
				attrs: {
					circle: {
						r: 4,
						magnet: true,
						stroke: '#5F95FF',
						strokeWidth: 1,
						fill: '#fff',
						style: {
							visibility: 'hidden',
						},
					},
				},
			},
			right: {
				position: 'right',
				attrs: {
					circle: {
						r: 4,
						magnet: true,
						stroke: '#5F95FF',
						strokeWidth: 1,
						fill: '#fff',
						style: {
							visibility: 'hidden',
						},
					},
				},
			},
			bottom: {
				position: 'bottom',
				attrs: {
					circle: {
						r: 4,
						magnet: true,
						stroke: '#5F95FF',
						strokeWidth: 1,
						fill: '#fff',
						style: {
							visibility: 'hidden',
						},
					},
				},
			},
			left: {
				position: 'left',
				attrs: {
					circle: {
						r: 4,
						magnet: true,
						stroke: '#5F95FF',
						strokeWidth: 1,
						fill: '#fff',
						style: {
							visibility: 'hidden',
						},
					},
				},
			},
		},
		items: [
			{
				group: 'top',
			},
			{
				group: 'right',
			},
			{
				group: 'bottom',
			},
			{
				group: 'left',
			},
		],
	},

3、边:router、connector
4、连接:配置 items，items 是一个数组 PortMetadata[]，数组的每一项表示一个连接桩(就是可以连接线的圆点) 以上port的配置

5、交互：在画布实例中配置：connecting，在边教程中我们知道，可以在添加边的时候指定 router 和 connector，如果整个画布中大部分边的 router 或者 connector 是一样的，我们可以直接配置在 connecting 中，这样就可以避免在边中重复配置。

connecting: {
			router: {
				name: 'metro',
			},
			connector: {
				name: 'rounded',
				args: {
					radius: 8,
				},
			},
			anchor: 'center',
			connectionPoint: 'anchor',
			allowBlank: false,
			snap: {
				radius: 20,
			},
			createEdge() { // 配置拉出线的样式
				return new Shape.Edge({
					attrs: {
						line: {
							stroke: '#A2B1C3',
							strokeWidth: 2,
							targetMarker: {
								name: 'block',
								width: 12,
								height: 8,
							},
						},
					},
					zIndex: 0,
				});
			},
			validateConnection({ targetMagnet }) {
				return !!targetMagnet;
			},
		},

highlighting: { // 触发某种事件时的高亮样式
			magnetAdsorbed: { //接桩吸附连线时在连接桩外围围渲染一个包围框
				name: 'stroke',
				args: {
					attrs: {
						fill: '#5F95FF',
						stroke: '#5F95FF',
					},
				},
			},
		},

6、
7、
四、