网址：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 中，这样就可以避免在边中重复配置。文章来源：https://www.toymoban.com/news/detail-634007.html
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、
四、文章来源地址https://www.toymoban.com/news/detail-634007.html
到了这里，关于antv/x6绘图 2.2.1的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
