天天看點
傳回

AntV G6将節點修改成圖檔

1.在每個節點中添加圖檔

代碼布局如下：

AntV G6将節點修改成圖檔

 實作效果如下圖：

AntV G6将節點修改成圖檔

主要代碼：

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.通過周遊節點的方式修改節點的圖檔

代碼布局：

AntV G6将節點修改成圖檔

實作效果：

AntV G6将節點修改成圖檔

主要代碼：

{
   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>
antv G6 修改節點 節點修改成圖檔 節點類型type
上一篇: SAP MM Output Procedure中條件類型裡的Requirement是在哪裡定義的？
下一篇: Centos 提示Device does not seem to be present的問題

繼續閱讀