首先附上官方文档:https://x6.antv.antgroup.com/tutorial/about
1.安装依赖
# npm
$ npm install @antv/x6 --save
# yarn
$ yarn add @antv/x6
2. 开始使用
1.创建画布
X6 支持 JSON 格式数据,该对象中 nodes
代表节点数据,edges
代表边数据,可以使用 attrs
属性来定制节点和边的样式(可以类比 CSS)。
<div id="container"></div>
onMounted(() => {
const graph = new Graph({
container: document.getElementById('container') as HTMLElement,
width: 800,
height: 600,
background: {
color: '#F2F7FA',
},
})
graph.fromJSON(data) // 渲染元素
graph.centerContent() // 居中显示
})
2. 渲染节点和边
X6 支持 JSON 格式数据,该对象中 nodes
代表节点数据,edges
代表边数据,可以使用 attrs
属性来定制节点和边的样式(可以类比 CSS)。
const data = {
nodes: [
{
id: 'node1',
shape: 'rect',
x: 40,
y: 40,
width: 100,
height: 40,
label: 'hello',
attrs: {
// body 是选择器名称,选中的是 rect 元素
body: {
stroke: '#8f8f8f',
strokeWidth: 1,
fill: '#fff',
rx: 6,
ry: 6,
},
},
},
{
id: 'node2',
shape: 'rect',
x: 160,
y: 180,
width: 100,
height: 40,
label: 'world',
attrs: {
body: {
stroke: '#8f8f8f',
strokeWidth: 1,
fill: '#fff',
rx: 6,
ry: 6,
},
},
},
],
edges: [
{
shape: 'edge',
source: 'node1',
target: 'node2',
label: 'x6',
attrs: {
// line 是选择器名称,选中的边的 path 元素
line: {
stroke: '#8f8f8f',
strokeWidth: 1,
},
},
},
],
}