X6 是蚂蚁金服 AntV 旗下的图编辑引擎,X 象形图编辑场景的关系链接,同时 X6 又是 G6 的孪生兄弟,所以沿用了 G6 中的 6,深究一下,6 源于《六度分隔理论》,表达了我们对关系数据、关系网络的敬畏和着迷。 X6 脱胎于蚂蚁实际的业务场景,在此基础上,我们完善了图编辑场景的常用扩展,如小地图、网格系统、对齐线、框选、redo/undo等,内置了图编辑场景的常规交互和设计,如群组、链接桩、节点缩放、旋转、连线交互,并提供了基于 HTML 和 React 低成本定制节点能力。 特性预览快速上手只需要掌握创建画布、添加节点/边、更新节点/边、删除节点/边这几个 API 即可开始使用 X6,并且我们已将 X6 所有特性提取到画布的配置项中,系统默认的配置文件 节点、连线与画布,图编辑核心能力易定制节点X6 预置了一些常用节点样式,创建节点时通过 然而,实际业务场景中的节点可能要更复杂,预置样式不满足需求?没关系,我们还提供了两种灵活的自定义节点的方式。一种使用 HTMLElement 或 HTML 代码片段来定义节点(使用时将 丰富连线和箭头样式内置了直线、曲线、拐线、正交线、关系线、循环线等常见连线样式和 10 多种箭头样式。 网格系统与无限画布网格是节点在画布中定位时最小像素单元,例如当节点的位置是 将 交互能力与配套组件,图编辑不可或缺链接桩与锚点通过父子节点和 点选和框选点击节点/边时选中节点,按下 Cmd/Ctrl 连续点击可以同时选中多个节点,通过 对齐线对齐线是移动节点排版的辅助工具,默认禁用,可以通过 小地图支持渲染粒度定制和样式定制,即是否在小地图中渲染节点/边,默认只渲染节点。在小地图中并不会绘制完整的节点,而是用一个色块代替节点,色块颜色支持自定义。 UI 组件搭建一个复杂的图编辑应用还需要用到 Menubar、Toolbar、Dropdown、ContextMenu、Splitbox 等 UI 组件,我们在 x6-components 中提供了一些这样的 React 组件,可以搭配 antd 使用。 最后非常感谢你的耐心阅读,X6 还是个新生儿,虽然内测版早已在内部数据研发(ER图)、运维中台(流程图)等多个产品应用上线,但相信还有很多问题有待完善,欢迎在 GitHub 给我们反馈问题。如果你对 X6 或者 AntV 旗下的其他产品感兴趣,可以通过以下渠道关注我们:
|