AntV G6将节点修改成图片

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 eqeqeqif (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 eqeqeqif (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 eqeqeqif (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 eqeqeqif (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 eqeqeqif (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 eqeqeqif (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将节点修改成图片相关推荐

项目中使用antv G6 实现节点链路之间动态效果
项目前端开发框架是使用VUE 项目需求:在不同的服务节点之间,根据不同的链路数据,显示出节点之间的链路状态,同时实现节点之间的动态效果. 先看效果 1 下载依赖包 # 使用CND引入 npm i @a ...
echarts树图图标修改成图片以及自定义图片首次加载不显示的问题的修改＜js＞
首先看一下显示效果,如下图所示: 1.首先修改图片,在option对象中加入下方代码就可实现图片的修改,但是存在bug symbol:'image://https://ss2.bdstatic.co ...
AntV G6流程图节点控制显示和隐藏
1.点击隐藏,控制隐藏节点4以及相关的边 2.点击显示,显示节点4以及相关的边 3.点击添加颜色,给指定节点4添加颜色 demo如下: <!DOCTYPE html> <html&g ...
AntV G6的相关使用总结
本文是对AntV G6目前研究到的内容的一个总结,目前实现了以下几点内容: 1.拖拽.缩放: 2.修改节点样式--即:将节点修改成图片显示: 3.修改节点的连线长度: 4.节点防碰撞设置: 5.鼠标悬 ...
在 Vue3 中优雅使用 antV G6 的流程总结
在 Vue3 中使用 antV G6 的流程 1. 在项目中引入 G6 import G6 from '@antv/g6'; 2. 创建挂载容器 <div id="mountNode& ...
antv/G6使用记录，vue组件实现节点、边的动态增减、右键事件等功能
antv/G6使用记录,vue组件实现节点.边的动态增减.右键事件等功能基本展示功能点: 特性: ==完整代码== ==示例数据== 补充说明: 基本展示 antv/G6是蚂蚁金服数据可视化团队 ...
antv G6 + react umi(vue,ng) 实现节点红点（badges）
在我们使用G6做知识图谱,topo图时,业务场景一般会涉及到告警的节点要有突出标识,所谓红点,因为G6内置是不自带此功能的(虽然Graphin是可以直接用的,但基于G6的react框架),这样我们可以 ...
解决PS中：无法将图片存储为Web存储格式，及如何将图片大小修改成10KB的问题
1.所用的 PS (PhotoShop) 版本: Adobe Photoshop CC 2018 2.出现的问题: 在将图片转化成 10KB 大小时,出现将存储为Web存储格式时,页面显示无法操作: ...
把图片修改成指定的像素大小？
前几天有个小伙伴因为考试需要在网上报名上传照片,而来咨询我,怎样把图片修改成指定的像素大小?因为他所报名的网站严格要求了上传图片的像素.这让我不由的想起很多平台对图片像素的大小都有所限制,比如上传主图 ...

AntV G6将节点修改成图片

AntV G6将节点修改成图片相关推荐

最新文章

热门文章