antvG6 实现画布拖拽放缩，节点拖拽

前言

上一篇分享了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 实现画布自适应

转载请注明原作者 不喜勿喷，欢迎补充~~