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 给我们反馈问题。

更多相关文章

随机推荐