Loading...
通过 npm 或 yarn 命令安装 X6。
# npm$ npm install @antv/x6 --save# yarn$ yarn add @antv/x6
如果使用 umd
包,可以使用下面三个 CDN 中的任何一个,默认使用 X6 的最新版:
在开始之前,推荐先学习 SVG 基础知识,在有一些基础 SVG 知识储备下,我们以一个简单的例子开始体验 X6。
在页面中创建一个画布容器,然后初始化画布对象,可以通过配置设置画布的样式,比如背景颜色。
<div id="container"></div>
import { Graph } from '@antv/x6'const graph = new Graph({container: document.getElementById('container'),width: 800,height: 600,background: {color: '#F2F7FA',},})
X6 支持 JSON 格式数据,该对象中 nodes
代表节点数据,edges
代表边数据,可以使用 attrs
属性来定制节点和边的样式(可以类比 CSS)。
X6 支持使用 SVG
、HTML
来渲染节点内容,在此基础上,我们还可以使用 React
、Vue
组件来渲染节点,这样在开发过程中会非常便捷。在拿到设计稿之后,你就需要权衡一下使用哪一种渲染方式,可以参考下面的一些建议:
SVG
节点例如:在上面节点基础上,我们有一个新的需求:给节点加上右键菜单。如果使用 SVG
来实现会比较复杂,我们直接使用 React
来渲染节点。这里我们使用 X6 配套的 React 渲染包 @antv-x6-react-shape
。
除了基本的元素渲染能力,X6 还内置了大量的图编辑配套插件,使用这些成熟的插件,能很大程度上降低开发成本。下面为画布增加对齐线功能,当移动的节点与其他节点对齐时,会自动出现对齐线,可以方便用户进行位置排版。
import { Snapline } from '@antv/x6-plugin-snapline'graph.use(new Snapline({enabled: true,}),)
在上面的步骤 2 渲染节点和边
中可以看到,可以使用 fromJSON
将 JSON
数据渲染到画布中,当然,也支持将画布中的数据导出成 JSON
,这样我们就可以将画布数据序列化后存储到服务端。
graph.toJSON()
我们的演示 demo 就到这里了,想继续了解 X6 的一些能力,可以从基础教程开始阅读。