React+Vis.js（04）：vis.js设置节点显示图片

已于 2024-08-20 21:58:31 修改
阅读量357 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： Vis.js 文章标签： javascript react.js 前端 vis.js
于 2024-08-19 21:11:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/WwLK123/article/details/141334907

文章目录


我们继续以 复仇者联盟为例，来介绍如何实现节点显示 图片。

实现效果

以图片进行节点的显示，使得显示效果更加直观，信息更为明了。
在这里插入图片描述

关键代码

在vis.js中，通过属性shape来控制节点显示为图像。

const nodes = new vis.DataSet([
  {
了解本专栏 订阅专栏 解锁全文 超级会员免费看
React+Vis.js（06）：vis.js修改选中节点的样式和边的样式
WwLK123的博客
08-20 481
vis.js修改当前选中节点的样式（背景颜色、文字颜色）和边的样式（颜色）。
React+Vis.js（02）：vis.js设置节点样式
WwLK123的博客
08-18 639
对vis.js的节点颜色、节点字体颜色、节点边框颜色、关系的颜色、粗细进行自定义。
Vis.js – 基于浏览器的动态 JavaScript 可视化库
weixin_33969116的博客
10-29 685
Vis.js – 基于浏览器的动态 JavaScript 可视化库 一、总结 一句话总结：Vis.js 是一个动态的，基于浏览器的可视化库。该库被设计为易于使用，能处理大量的动态数据。该库由以下几部分组成：一是数据集和数据视图，基于灵活的键/值数据集，可以添加，更新和删除项目，订阅数据集变化；二是时间轴，用于显示不同类型的时间轴数据，在时间轴上项目可以交互移动，缩放和操纵；三是图形，使用节点和...
visjs关系图
高山景行，一尘不染
04-02 1801
官网：http://visjs.org/index.html#download_install git地址：https://github.com/binliuli/visual.git <!doctype html> <html> <head> <title>Network | Basic usage</title> ...
vis.js绘制网络拓扑图，并且鼠标移上去会有显示效果
donghuzi1
06-02 845
<!DOCTYPE html> <!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!--> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF8" /> <title> .
Web前端文档阅读笔记-vis.js动态添加节点（vue cli环境）
IT1995的博客
05-21 3366
这里主要是针对vis的network图进行节点动态添加 图用的是vis.js，表单使用的是element-ui 程序运行截图如下： 添加一个节点： 这里是不需要刷新页面就能添加的。 程序结构如下： 关键源码如下： FormGroup.vue <template> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" cla..
vis.js力导向图第一弹——基本展示
toBeMN的博客
11-16 7369
正经学徒，佛系记录，不搞事情 一、什么是vis.js vis.js是一个前端可视化框架，官方文档位置：http://visjs.org/docs/network/ 力导向图（Force-Directed Graph），是绘图的一种算法。在二维或三维空间里配置节点，节点之间用线连接，称为连线。各连线的长度几乎相等，且尽可能不相交。节点和连线都被施加了力的作用，力是根据节点和连线的相对位置计算的...
React+Vis.js（03）：vis.js设置节点形状
WwLK123的博客
08-18 550
vis.js可以通过shape属性来定义每个节点的形状。
React+Vis.js（05）：vis.js的节点的点击事件
最新发布
WwLK123的博客
08-20 400
React+Vis.js实现节点的双击事件。
vue 集成 vis-network 实现网络拓扑图的方法
12-11
vis.js  网站 https://visjs.org/ vs  code 下安装命令 npm install vis-network 在vue  下引入 vis-network组件 const vis = require("vis-network/dist/vis-network.min.js"); require("vis-network/dist/vis-network.min.css"); 例子代码使用 let DIR = "/jtopo/"; let nodes = [ { id: 1, shape: "circularImage", image: DIR + "server
Vis.js教程（四）：给关系图的节点设置Image背景
WwLK123的博客
12-05 865
在我们介绍了如何给关系图设置关系指向以及关系标签。本节我们计划给关系图节点设置背景，拿菲尼克斯太阳队关系图的例子来说，如果给每一个球员节点都加上图片，这样看起来远远比名称更直观。
动态可视化库Vis.js：秀外慧中，可处理大量动态数据
04-18 5509
Vis.js 是一个动态的、基于浏览器的可视化库，可处理大量的动态数据并能与这些数据进行交互操作。该项目是由Almende B.V公司开发的，包含 DataSet、Timeline和Graph组件。 Vis.js组件介绍： 数据集（DataSet）：灵活的键/值。可添加、更新和删除项目。DataSet可以过滤和订制项目，转换项目领域。数据视图（DataView）
visjs添加节点、图像和文字共同展示、各种点击事件
高山景行，一尘不染
05-28 5488
let nodesArr = [ { id: 1, label: "待解决案件的三", shape: "circle", margin: 10, color: "#FFFF00" }, { id: 2, label: "点击", shape: "circle", margin:...
vue使用vis.js绘制拓扑；修改指定线条颜色
阿天的博客
04-12 1397
vue利用vis.js绘制拓扑，修改线条颜色，修改节点图标；
vis设置某一个节点icon不一样（img、样式同理）
小胡仙的博客
07-28 957
效果： 代码： <template> <div> <i class="fa fa-building-o" style="visibility:hidden;"></i> <div class="visBox"> <div id="mynetwork"></div> <div v-if="this.isTitle" class="visTitle">{{.
vue---vis实现复杂网状关系图显示
热门推荐
maidu_xbd的博客
06-16 1万+
vis.js是基于浏览器的动态可视化库。能够处理大量的动态数据，实现对数据的操作和交互。 首先，贴上一个很好的vis.js参考文档：https://yajunfan.github.io/vis/#/module 案例效果如图 （1）安装【npm inatall vis --save】 （2）引入：在【main.js】中引入【import"vis/dist/vis.css";】，在展示网状图的页面引入【importVisfrom"vis";】 （3）实现 网状图实现： 首先在html....
vis.js网络拓扑图自定义图片
笑到世界都狼狈的博客
09-09 2796
1.首先看一下我做的效果图： 2.在官方demo中找有自定义图片的例子：https://visjs.github.io/vis-network/examples/ 3.点击进去发现只有demo,没有源码，，，，于是f12自己找 4.只需要添加下面代码就可以看到效果了 var options = { nodes:{ shape: 'image', image:"https://timgsa.baidu.com/timg?i.
【visjs】使用visjs绘制关系图
LuviaWu的博客
12-18 2989
附上链接： vis网站 visjs中文使用说明文档 使用步骤： 1、安装 npm install vis-network 2、在页面中引入 <div id="mynetwork" class="myChart" :style="{width: '100%', height: '90vh'}"></div> require('vis-network/dist/dist/vis-network.min.css') const vis = require('vis-network/di
使用visjs制作网络拓扑图
静子
08-08 1560
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdo...
React项目构建与部署：深入理解vis.js网络
开发者可以利用 vis.js 建立起节点和边的可视化网络，适合于社交网络、项目管理、图形化用户界面等多个场景。 2. Create React App 入门 Create React App 是一个用来创建 React 单页应用的官方命令行工具。它提供...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

文理棵

你的鼓励将是我最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值