X6 1.0 抱歉来晚-阿里云开发者社区

作者 | 问崖

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

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

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

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

欢迎给我们 GitHub 仓库（https://github.com/antvis/x6）加星 🔥🔥🔥

快速上手

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

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

易定制的节点

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

基础图形

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

使用 HTML 和 React 渲染节点

丰富的连线和箭头

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

网格和背景

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