AntV G6将节点修改成图片

笑到世界都狼狈

已于 2022-11-09 09:01:29 修改

阅读量8.6k

点赞数 4

分类专栏： AntV G6 文章标签： antv G6 修改节点节点修改成图片节点类型type

于 2021-12-23 17:36:20 首次发布

本文链接：https://blog.csdn.net/qq_36509946/article/details/122093988

版权

AntV G6 专栏收录该内容

14 篇文章 48 订阅

订阅专栏

1.在每个节点中添加图片

代码布局如下：

实现效果如下图：

主要代码：

defaultNode: { // 节点样式修改
  type: 'image', // 设置节点为图片
  size: [40, 40] // 节点大小
}

{
  id: 'node4',
  label: '引擎',
  img: 'https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000',
  ip: '192.168.1.4'
  // 此处的key值一定不要出现type，如果出现type，图片修改无效
}

完整代码：

<template>
  <div>
    <div id="container"></div>
  </div>
</template>
<script>
import G6 from '@antv/g6'
export default {
  name: 'g6',
  mounted () {
    this.initComponent()
  },
  data () {
    return {
      data: {}, // 拓扑图数据
      graph: undefined // new G6
    }
  },
  methods: {
    /**
     * 创建G6，并对G6的一些设置
     * */
    initComponent () {
      this.data = {
        nodes: [
          {
            id: 'node1',
            label: '采集服务器',
            img: 'https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000',
            ip: '192.168.1.1'
          },
          {
            id: 'node2',
            label: '数据库',
            img: 'https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000',
            ip: '192.168.1.2'
          },
          {
            id: 'node3',
            label: '终端',
            img: 'https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000',
            ip: '192.168.1.3'
          },
          {
            id: 'node4',
            label: '引擎',
            img: 'https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000',
            ip: '192.168.1.4'
          }
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2'
          },
          {
            source: 'node1',
            target: 'node3'
          },
          {
            source: 'node1',
            target: 'node4'
          }
        ]
      }
      this.graph = new G6.Graph({
        container: 'container',
        width: 800,
        height: 800,
        layout: {
          type: 'force'
        },
        modes: {
          default: ['drag-canvas', 'zoom-canvas', 'drag-node'] // 允许拖拽画布、放缩画布、拖拽节点
        },
        defaultNode: { // 节点样式修改
          type: 'image', // 设置节点为图片
          size: [40, 40] // 节点大小
        }
      })
      this.graph.data(this.data)
      this.graph.render()
    }
  }
}
</script>

但平时开发中，图片一般是前端自己给的，后台数据给图片地址未免有些麻烦，所以我这边通过前端对数据的遍历进行图片的修改，具体我可以在数据中添加一个status状态，通过返回的不同状态，对图片进行修改

注：这边的nodes节点中的key值一定不要出现type,如果出现type,节点就不会变成图片，一直是小圆圈<此处踩坑两小时，后台返回到前端的节点数据有一个type字段，导致图片一直加载不出来，将type字段改个名字之后，图片立马加载出来了......所以，如果按这种方法修改节点图片如果没有任何效果，赶紧看看你的节点数据中有没有type字段，有的话赶紧改个名字>

应该是插件的一个bug,按道理节点的type字段是不应该影响到defaultNode: {type: 'image',size: [40, 40]}中设置的type的

参考文档

2.通过遍历节点的方式修改节点的图片

代码布局：

实现效果：

主要代码：

{
   id: 'node1',
   label: '采集服务器',
   ip: '192.168.1.1',
   status: 0
   // 此处的key值一定不要出现type，如果出现type，图片修改无效
},

 /**
       * 遍历节点数据，给节点添加图片
       */
      for (let i = 0, len = this.data.nodes.length; i < len; i++) {
        // eslint-disable-next-line eqeqeq
        if (this.data.nodes[i].status == 0) { // 'offlineAnomaly'
          this.data.nodes[i].img = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100122420C335-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641970684&t=70b9b0b3a05f6ca5d56d6c4234fdd1fd'
        }
        // eslint-disable-next-line eqeqeq
        if (this.data.nodes[i].status == 1) { // 'onlineAuth'
          this.data.nodes[i].img = 'https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000'
        }
        // eslint-disable-next-line eqeqeq
        if (this.data.nodes[i].status == 2) { // 'onlineAuth'
          this.data.nodes[i].img = 'https://img0.baidu.com/it/u=3927459320,2138990686&fm=26&fmt=auto'
        }
      }

完整代码：

<template>
  <div>
    <div id="container"></div>
  </div>
</template>
<script>
import G6 from '@antv/g6'
export default {
  name: 'g6',
  mounted () {
    this.initComponent()
  },
  data () {
    return {
      data: {}, // 拓扑图数据
      graph: undefined // new G6
    }
  },
  methods: {
    /**
     * 创建G6，并对G6的一些设置
     * */
    initComponent () {
      this.data = {
        nodes: [
          {
            id: 'node1',
            label: '采集服务器',
            ip: '192.168.1.1',
            status: 0
            // 此处的key值一定不要出现type，如果出现type，图片修改无效
          },
          {
            id: 'node2',
            label: '数据库',
            ip: '192.168.1.2',
            status: 1
          },
          {
            id: 'node3',
            label: '终端',
            ip: '192.168.1.3',
            status: 2
          },
          {
            id: 'node4',
            label: '引擎',
            ip: '192.168.1.4',
            status: 0
          }
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2'
          },
          {
            source: 'node1',
            target: 'node3'
          },
          {
            source: 'node1',
            target: 'node4'
          }
        ]
      }
      /**
       * 遍历节点数据，给节点添加图片
       */
      for (let i = 0, len = this.data.nodes.length; i < len; i++) {
        // eslint-disable-next-line eqeqeq
        if (this.data.nodes[i].status == 0) { // 'offlineAnomaly'
          this.data.nodes[i].img = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100122420C335-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641970684&t=70b9b0b3a05f6ca5d56d6c4234fdd1fd'
        }
        // eslint-disable-next-line eqeqeq
        if (this.data.nodes[i].status == 1) { // 'onlineAuth'
          this.data.nodes[i].img = 'https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000'
        }
        // eslint-disable-next-line eqeqeq
        if (this.data.nodes[i].status == 2) { // 'onlineAuth'
          this.data.nodes[i].img = 'https://img0.baidu.com/it/u=3927459320,2138990686&fm=26&fmt=auto'
        }
      }
      this.graph = new G6.Graph({
        container: 'container',
        width: 800,
        height: 800,
        layout: {
          type: 'force'
        },
        modes: {
          default: ['drag-canvas', 'zoom-canvas', 'drag-node'] // 允许拖拽画布、放缩画布、拖拽节点
        },
        defaultNode: { // 节点样式修改
          type: 'image', // 设置节点为图片
          size: [40, 40] // 节点大小
        }
      })
      this.graph.data(this.data)
      this.graph.render()
    }
  }
}
</script>