X6 1.0 抱歉来晚

本文主要是介绍X6 1.0 抱歉来晚，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

X6 是蚂蚁金服 AntV 旗下的图编辑引擎，X 象形图编辑场景的关系链接，同时 X6 又是 G6 的孪生兄弟，所以沿用了 G6 中的 6，深究一下，6 源于《六度分隔理论》，表达了我们对关系数据、关系网络的敬畏和着迷。

更好的阅读体验请点击阅读原文至语雀文档。

图编辑也是图领域一个重要方向，许多流程图、关系图绘制场景都需要它。基于蚂蚁内部的机器学习算法建模平台多年的可视编排能力打磨，我们决定把其中的图编辑内核抽取出来，图编辑 X6。

提炼后经过近一年的内部业务打磨，我们完善了图编辑场景的常用扩展，如小地图、网格系统、对齐线、框选、撤销/重做等，内置了图编辑场景的常规交互和设计，如群组、链接桩、节点缩放、旋转、连线交互，并提供了基于 HTML 和 React 低成本定制节点能力。今天我们很高兴能为可视化开源社区带来 X6 1.0 正式版本，请多关照！

快速上手

只需要掌握创建画布、添加节点/边、更新节点/边、删除节点/边这几个 API 即可开始使用 X6，并且我们将 X6 所有特性提取到画布的配置项中，一共包含 50 多个配置选项，基于这些配置项我们可以快速定制出自己的画布。详情请参考快速上手（https://x6.antv.vision/zh/docs/tutorial/getting-started/）教程。

节点、连线与画布，图编辑核心能力

易定制的节点

X6 预置了一些常用节点样式，创建节点时通过 shape 来指定使用哪种图形来渲染节点即可，而且绝大部分节点样式和交互都可被自定义。

基础图形

我们可以基于 path、 polygon 和 polyline 三个基础图形扩展出更多图形。然而，实际业务场景中的节点可能要更复杂，预置样式不满足需求？没关系，我们还提供了两种灵活的自定义节点的方式。支持使用 HTML 渲染节点，使用时将 shape 指定为 html 即可；另外还可以使用 React 组件来渲染节点，使用时需要安装并引入x6-react-shape，配合咱家 antd 更是天生一对哦。

使用 HTML 和 React 渲染节点

丰富的连线和箭头

内置了丰富的箭头和连线样式，分别可以参考箭头使用教程、路由使用教程和连接器使用教程（https://x6.antv.vision/zh/docs/api/registry/marker）。其中路由将边的路径点做进一步处理，并在必要时添加额外的点，并返回处理后的点。然后连接器将边的起点、路由处理后的路径点、终点连接成一条完整的连线。同时我们也提供了对应的扩展能力，详情参考自定义箭头教程、自定义路由教程和自定义连接器教程。

内置箭头和自定义箭头	三次贝塞尔曲线	圆角线
	地铁线	自定义路由
ER 关系连线	跳线

网格和背景

网格是节点在画布中定位时最小像素单元，例如当节点的位置是 {x: 12, y: 18} 网格大小为 5 时，那么节点渲染到画布的实际位置将是 {x:10, y: 20}。X6 默认提供了 dot，fixeDdot， mesh 和 doubleMesh 四种风格的网格，并且支持自定义网格大小和颜色。更多详情请参考网格使用教程。另外，如果内置网格样式不满足业务需求，我们还提供了定义和使用自定义网格的机制。

灵活易用的网格系统

同时可以为画布指定背景颜色和背景图片，例如我们可以指定画布背景颜色为 #fcfcfc，同时将 AntV 的 Logo 作为画布的背景图片，设置背景图片的透明度为 0.2，并以水印的方式重复显示。更多背景相关设置请参考背景使用教程，另外我们也提供了自定义背景图片显示方式的接口。

背景颜色和背景图片

交互能力与配套组件，图编辑不可或缺

链接桩

链接桩是节点上的固定连接点，很多图应用都有链接桩，并且有些应用还将链接桩分为输入链接桩和输出连接桩。创建节点时我们可以通过 ports选项来配置链接桩。可以指定链接桩的位置，如链接桩位于节点顶部和底部，同时也可以为链接桩指定标签。更多详情请参考链接桩使用教程和链接桩布局选项。

输入和输出链接桩	沿椭圆均匀布局的链接桩
动态添加/删除链接桩	链接桩高亮和自动吸附

群组

我们可以通过父子嵌套来实现群组，支持通过交互拖拽成组，支持限制群组内的子节点的移动范围或自动扩展/收缩父节点的大小，另外也可以通过节点中的展开/折叠按钮来展开/折叠群组，更多详情请参考群组使用教程。

拖拽嵌套	限制子节点移动
自动扩展父节点	展开/折叠

点选/框选

点击节点/边时选中节点，按下 Cmd/Ctrl 连续点击可以同时选中多个节点，开启 rubberband  选项后支持框选能力。更多详情请参考点选/选框使用教程。

撤销/重做

撤销/重做是图编辑场景的常用能力，在 X6 中可以通过 history 配置项来开启撤销/重做能力，更多详情请参考撤销/重做使用教程。

对齐线

对齐线是移动节点排版的辅助工具，默认禁用，可以通过 snapline 配置项开启和定制对齐线的样式。更多详情请参考对齐线使用教程。

小地图

小地图是完整画布的预览，可以通过平移缩放小地图的视口来平移缩放画布，支持渲染粒度定制和样式定制，即是否在小地图中渲染节点/边，节点的细节粒度等，例如下面案例中使用色块来代替了每个节点。更多详情请参考小地图使用教程。

小地图

还有更多配套的交互组件，如剪切板、拖拽、键盘快捷键、鼠标滚轮缩放画布等，请点击对应的链接查看。

UI 组件

搭建一个复杂的图编辑应用还需要用到 Menubar、Toolbar、Dropdown、ContextMenu、Splitbox 等 UI 组件，我们在 x6-react-components 中提供了一些这样的 React 组件，可以搭配 antd 使用。点击下面链接查看每个组件的使用文档。

• Menu 菜单

• Dropdown 下拉菜单

• ContextMenu 右键菜单

• Menubar 菜单栏

• Toolbar 工具栏

• ColorPicker 颜色选择器

• SplitBox 包含分割条的容器

• ScrollBox 自定义滚动条的容器

• AutoScrollBox 自动根据内容大小设置和更新滚动条的容器

菜单栏	工具栏
颜色选择器	分隔条

自由灵活的扩展能力

X6 设计之初就充分考虑了可扩展性，精心设计了简单、高可拓展的接口。属性、连接桩布局、连接桩标签布局、节点锚点、边的锚点、连接器、路由、箭头、网格、背景、工具等都可以通过注册机制灵活扩展。有了这些扩展能力，发挥你的想象力，在 X6 这颗种子上生出无限的可能。下面是用 X6 实现的桑基图：

福利来了，三个应用场景 DEMO

上面分享了那么多特性，那如何快速将 X6 应用到自己场景中呢？最快的方式莫过于“拿来主义”，所以我们在配套源码中提供了流程图编排、DAG 图编排和 ER 图渲染三个应用场景 DEMO，我们可以从这三个 DEMO 开始定制自己的应用。更多场景的应用我们正在筹备中，同时也欢迎大家给我们贡献场景案例。

流程图，流程编排场景。

有向无环图（DAG 图），算法建模场景。

ER 图，ER 建模场景。

最后

非常感谢你的耐心阅读，X6 还是个新生儿，虽然内测版早已在内部数据研发(ER图)、运维中台(流程图)等多个产品应用上线，但相信还有很多问题有待完善，欢迎在 GitHub 给我们反馈问题。

这篇关于X6 1.0 抱歉来晚的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！