树状图 标签节点拖拽

一、描述

开始用的echarts画的树状图，然后拖拽功能没有实现，百度了很多也没实现，最后发现了一个好的图可视化引擎——antv g6。官网地址：G6 - AntV

 话不多说，直接上树状图可拖拽案例

生成树状 效果图：

 此效果图是  随意拖拽后  截图了一下：

 二、代码实现

1、下载 

npm install --save @antv/g6     案例版本为  4.8.12

2、导入模块

import G6 from '@antv/g6'

3、创建标签

 <div id="mountNode1" />

4、js编写   

data里面的nodes是所有的标签节点信息，edges是每个标签节点关系之间的指向谁。

该案例配置项参考地址    https://www.yuque.com/antv/g6/graph

init() {
      const data = {
        nodes: [
          {
            id: 'node1',
            type: 'image', // 设置节点类型为 image
            img: 'https://img0.baidu.com/it/u=1668758195,2574371464&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666',
            size: [40, 40] // 图片大小
          },
          {
            id: 'node2',
            type: 'image', // 设置节点类型为 image
            img: 'https://img0.baidu.com/it/u=910887682,3967331123&fm=253&fmt=auto&app=138&f=JPEG?w=721&h=500',
            size: [40, 40] // 图片大小
          },
          {
            id: 'node3',
            type: 'image', // 设置节点类型为 image
            img: 'https://img0.baidu.com/it/u=910887682,3967331123&fm=253&fmt=auto&app=138&f=JPEG?w=721&h=500',
            size: [40, 40] // 图片大小
          },
          {
            id: 'node4',
            type: 'image', // 设置节点类型为 image
            img: 'https://img0.baidu.com/it/u=910887682,3967331123&fm=253&fmt=auto&app=138&f=JPEG?w=721&h=500',
            size: [40, 40] // 图片大小
          },
          {
            id: 'node5',
            type: 'image', // 设置节点类型为 image
            img: 'https://img0.baidu.com/it/u=910887682,3967331123&fm=253&fmt=auto&app=138&f=JPEG?w=721&h=500',
            size: [40, 40] // 图片大小
          },
          {
            id: 'node6',
            type: 'image', // 设置节点类型为 image
            img: 'https://img0.baidu.com/it/u=910887682,3967331123&fm=253&fmt=auto&app=138&f=JPEG?w=721&h=500',
            size: [40, 40] // 图片大小
          },
          {
            id: 'node7',
            type: 'image', // 设置节点类型为 image
            img: 'https://img0.baidu.com/it/u=910887682,3967331123&fm=253&fmt=auto&app=138&f=JPEG?w=721&h=500',
            size: [40, 40] // 图片大小
          }
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2'
          },
          {
            source: 'node1',
            target: 'node3'
          },
          {
            source: 'node1',
            target: 'node4'
          },
          {
            source: 'node2',
            target: 'node5'
          },
          {
            source: 'node2',
            target: 'node6'
          },
          {
            source: 'node3',
            target: 'node7'
          }
        ]
      }
      //   配置项参考地址  https://www.yuque.com/antv/g6/graph
      var graph = new G6.Graph({
        container: 'mountNode1',
        width: 1100, // 画布的宽度
        height: 400, // 画布的高度
        modes: {
          default: ['drag-canvas', 'drag-node']
        },
        layout: {
          type: 'dagre',
          nodeSize: [80, 20],
          nodesep: 5, // 节点间距（px）  节点水平间距  默认50
          ranksep: 20 // 层间距（px） 父子之间层级间距  默认50
        },
        animate: true, // 切换布局时是否使用动画过度
        defaultNode: { // 默认状态下节点的配置
          size: [60, 30],
          color: 'steelblue',
          shape: 'rect',
          style: {
            lineWidth: 2,
            fill: '#fff'
          }
        },
        defaultEdge: { // 默认状态下边的配置
          size: 1,
          color: '#e2e2e2',
          style: {
            endArrow: {
              path: 'M 4,0 L -4,-4 L -4,4 Z',
              d: 4
            }
          }
        }
      })
      graph.data(data)
      graph.render()
    }

由于echarts绘画树状图没能实现标签节点拖拽功能，所以才换成了antv-g6代替。

如有大佬echarts能帮忙实现，请留言！