前言
上一篇分享了antvG6组件的简单demo,这篇文章比较简单,主要是实现画布拖拽放缩以及节点的拖拽。
一.主要代码如下:
modes: {
// 允许拖拽画布、放缩画布、拖拽节点
default: ['drag-canvas', 'zoom-canvas', 'drag-node']
},
二.效果图
三.完整代码
<template>
<div>
<div id="containerID" class="containeroo"></div>
</div>
</template>
<script>
import G6 from '@antv/g6'
export default {
name: 'g6',
mounted () {
this.initComponent()
},
data () {
return {
graph: undefined, // g6对象
graghData: {}, // 拓扑图数据
}
},
methods: {
/**
* 创建G6,并对G6的一些设置
* */
initComponent () {
// 拓扑图数据
this.graghData = {
// 节点数据
nodes: [
{
id: 'node1',
label: '总的类目',
ip: '192.168.1.1',
status: 0
},
{
id: 'node2',
label: '分类1',
ip: '192.168.1.2',
status: 1
},
{
id: 'node3',
label: '分类2',
ip: '192.168.1.3',
status: 2
},
{
id: 'node4',
label: '分类3',
ip: '192.168.1.4',
status: 3
},
{
id: 'node5',
label: '分类4',
ip: '192.168.1.8',
status: 4
}
],
// 节点连线关系
edges: [
{
source: 'node1',
target: 'node2'
},
{
source: 'node1',
target: 'node3'
},
{
source: 'node1',
target: 'node4'
},
{
source: 'node1',
target: 'node5'
}
]
}
// 创建g6实例
this.graph = new G6.Graph({
container: 'containerID',
width: 600,
height: 800,
layout: {
type: 'force'/* */
},
modes: {
default: ['drag-canvas', 'zoom-canvas', 'drag-node'] // 允许拖拽画布、放缩画布、拖拽节点
},
// 节点样式修改
defaultNode: {
size: 20 // 当节点为一个点时可设置
},
animate: true
})
// 接收数据并渲染
this.graph.data(this.graghData)
this.graph.render()
}
}
}
</script>
下一篇:antvG6 实现画布自适应
转载请注明原作者 不喜勿喷,欢迎补充~~