本文是对antv x6一个初步使用的简单总结,主要包括以下几点:
1.实现画布的平移拖拽
2.实现画布的layout方法
3.实现画布的放大缩小方法
4.实现画布的居中效果
实现效果如下:
完整代码如下:
<template>
<div>
<button @click="zoomInFn">放大</button>
<button @click="zoomOutFn">缩小</button>
<div id="container"></div>
</div>
</template>
<script>
import { Graph } from '@antv/x6'
import { GridLayout } from '@antv/layout' // umd模式下, const { GridLayout } = window.layout
export default {
name: 'X6',
mounted () {
this.initComponent()
},
data () {
return {
data: {}, // X6 数据
graph: undefined, // new X6
gridLayout: undefined, // new GridLayout
newModel: undefined
}
},
methods: {
zoomInFn () { // 放大
this.graph.zoom(0.2)
},
zoomOutFn () { // 缩小
this.graph.zoom(-0.2)
},
initComponent () {
this.data = {
nodes: [// 节点
{
id: 'node1', // String,可选,节点的唯一标识
width: 80, // Number,可选,节点大小的 width 值
height: 40, // Number,可选,节点大小的 height 值
label: 'hello' // String,节点标签
},
{
id: 'node2', // String,节点的唯一标识
width: 80, // Number,可选,节点大小的 width 值
height: 40, // Number,可选,节点大小的 height 值
label: 'world' // String,节点标签
}
],
edges: [// 边
{
source: 'node1', // String,必须,起始节点 id
target: 'node2' // String,必须,目标节点 id
}
]
}
this.graph = new Graph({
container: document.getElementById('container'),
width: 800,
height: 600,
panning: true // 拖拽平移
})
this.gridLayout = new GridLayout({ // layout布局
type: 'grid',
width: 600,
height: 400,
center: [300, 200],
rows: 4,
cols: 4
})
this.newModel = this.gridLayout.layout(this.data)
this.graph.fromJSON(this.newModel)
this.graph.centerContent() // 画布居中
}
}
}
</script>
<style scoped>
</style>