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

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

文章目录


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

实现效果

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

关键代码

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

const nodes = new vis.DataSet([
  {
   id: 1,
了解本专栏 订阅专栏 解锁全文 超级会员免费看
叁拾舞
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
vis-react:基于vis.js的数据可视化库
05-30
使用 vis.js 显示漂亮网络图的 React 组件 请务必访问以获取更多信息。 渲染的图形是可滚动、可缩放、视网膜就绪、动态的，并在双击时切换布局。 由于 vis.js 的命令性质，更新图形属性会导致图形的完全重绘并将其...
react-vis-bar-chart:使用react-vis创建的条形图组件
05-11
该项目是通过引导的。... 使用AJAX请求获取数据与API后端集成节点Ruby on Rails 在开发中代理API请求配置代理后出现“无效的主机头”错误手动配置代理配置WebSocket代理在开发中使用HTTPS 在服务器上生成动态<met
story-generator:预算可视化工具，用于探索和分析印度各个州的主要财政指标
05-19
StoryGenerator-CBGA印度的预算分析工具先决条件NodeJS（v4.4.3）开发设置： 克隆此存储库。 git clone https://github.com/cbgaindia/story-generator.git或转到repo目录cd story-generator 安装节点软件包。 npm ...
Family-Tree:交互式应用程序，以树状图和表格形式表示数据
03-13
在前端，JavaScript库如D3.js或者Vis.js可以用于将这些数据转换为可视化元素，构建出美观且交互性强的树形结构。用户可以通过点击节点、拖动元素、展开或折叠分支等方式，方便地查看和导航家谱。 表格是另一种常用...
39款时间轴代码.zip
06-24
时间轴的实现方式多种多样，可以基于纯CSS动画，也可以借助JavaScript库如jQuery或现代的Vue.js、React.js框架。在这些源代码中，你可能发现使用了如TimelineJS、Vis.js或D3.js等数据可视化库，它们提供了强大的时间...
微信小程序骨架屏
djjdjdjdjddjjdjd的博客
08-16 335
⑤ 在onLoad 中页面加载前定义 isLoading.value=true, 在加载完后定义 isLoading.value=false.骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。① 在相应微信小程序页面右下角点生成骨架屏，左侧小程序目录会自动生成 .wxml 、.wxss 文件，⑥ 在生成骨架屏页面中 v-if="isLoading" v-else 定义显示与隐藏。
网上商品订单转手系统bootpf
weixin_43213064的博客
08-18 406
【代码】springboot网上商品订单转手系统bootpf
Vue3项目-Cesium地图初始化
StupidlyGrass的博客
08-19 71
将node_modules中cesium/Build/Cesium文件夹拷贝至public目录下。3、index.html配置。一、安装、配置Cesium。1、安装Cesium。二、使用Cesium。
Vue :class 绑定可以结合多个判断维度来动态设置类
u010865136的专栏
08-19 66
二、:class="[isMute && 'disabled', env.isH5 && 'TUIChat-H5-footer']"一、数组语法允许你根据条件动态添加多个类名。数组中的每个元素可以是一个类名的字符串，或者是一个对象。对象中的键是类名，值是布尔值。
Vue路由
程小白的博客
08-19 334
这样我们的路由信息就配置好了。但是有一个bug需要解决。当我们配置好路由信息后，重启项目，再次访问，会发现什么也不显示，这是因为当项目启动起来时默认访问的路由的路径是"/"而非“/dept”和"/emp",但是在配置路由时并没有配置“/”的路由，因此要再新配置一个“/"的路由信息。
基于vue框架的爱看电影网站v4o92（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-15 1003
项目功能：用户,电影分类,电影信息,电影评分基于Vue框架的爱看电影网站项目功能丰富多样，旨在为用户提供一个集电影浏览、信息查询、观影体验、互动交流于一体的综合性平台。
一些有趣的XSS注入GAME
qq_67758645的博客
08-17 974
如果我们不经过前面的javascript:将其变成字符串，那么传进去后时候就会带两个引号，那么就算setTimeout可以将字符串当作代码执行，但是，里面还是一层字符串，执行不了。我理解的是javascript：将后面的alert字符串替换成alert js代码，类似于eval的作用，传进setTimeout的时候就不是字符串，而是js代码。将%编码试试，%25，这样到后端以后就会变成%28 %29，如果js能够解码的话，最后传到页面的时候在解码%28，%29为（），这样不就实现了嘛。
Bootstrap 附加导航（Affix）插件
2402_83140078的博客
08-17 600
附加导航（Affix）插件允许指定 固定在页面的某个位置。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 会锁定在某个位置，不会随着页面其他部分一起滚动。
Javascript嵌套函数的调用
Cc040909的博客
08-17 703
闭包的嵌套函数就不同了，由于有两个函数，调用栈就标记为1， 表示内部还有函数，这个函数不知道什么时候才执行，所以js引擎就把他保存在内存中了。恰好第一个函数和第二个函数执行的时候，眼睛观察到的调用是看不到对象，所以执行的是默认绑定，都默认绑定在全局对象window上(浏览器环境)。上面这个总结的过程非常微妙，细节就在于嵌套的函数的分部执行过程，尽管内部函数嵌套在外部函数内，但是外部函数并没有影响内部函数的权利，内部函数的执行是不受外部函数控制的。外部函数和内部函数是两个不同的事件循环位置，独立调用的，
从0-1开发一个Vue3前端系统页面-10.博客页面优化及子菜单设计
I am the light coursing in the soul of the moon.
08-19 529
开发遇到的问题_不再会有谎言的博客-CSDN博客相关链接会在文章中标注。Wandering-children-have-the-stars-as-companions: 从0-1开发一个Vue3前端系统页面 流浪的孩子有星星作伴~ WCHTSAC (gitee.com)本节主要内容是对博客页面主要内容的布局设计实现和子菜单功能的初步实现，同时使用组件化开发对代码进行分离，使代码可读性提高。
三高 vue
m0_62975692的博客
08-19 190
使用负载均衡器（如Nginx、HAProxy）可以将流量分散到多个服务器上，避免单点过载，提高系统的总体处理能力。- CDN（内容分发网络）也是一种缓存策略，用于缓存静态资源在地理上分散的节点，减少源服务器的负载和响应时间。- 引入缓存（如Redis、Memcached）可以减少数据库的读取次数，缓存频繁查询的结果，加快响应速度。- 优化数据库查询，使用合适的索引，避免复杂的关联查询可以显著提升数据库的处理能力。高扩展性是指系统或应用程序能够在面对不断增长的负载时保持性能和吞吐量的能力。
基于Java+SpringBoot+Vue的网上租赁系统设计与实现
azhou的代码园
08-18 807
本课题是根据用户的需要以及网络的优势建立的一个基于SpringBoot的网上租贸系统，来满足用户网络商品租赁的需求。本网上租贸系统应用Java技术，MYSQL数据库存储数据，基于SpringBoot框架开发。在网站的整个开发过程中，首先对系统进行了需求分析，设计出系统的主要功能模块，其次对网站进行总体规划和详细设计，最后对基于SpringBoot的网上租贸系统进行了系统测试，包括测试概述，测试方法，测试方案等，并对测试结果进行了分析和总结，进而得出系统的不足及需要改进的地方，为以后的系统维护和扩展提供了方便
JavaScript - 事件监听
qq_57620101的博客
08-19 61
一：通过HTML标签中的事件属性进行绑定二：通过DOM元素属性绑定。
【Jquery】jquery的简单使用
最新发布
qq_62555748的博客
08-19 416
jquery的简单使用
{ type: "searchSelect", placeholder: "签约机构", valueName: 'signOrganId', optionName: "label", searchItemName: "label", optionId: "key", searchApi:commonService.orgPageList({}).then(res=>{ const {retData}=res retData.map(item=>{ return {key: item.id, label: item.organName, value: item.id,} }) }) }, 分析一下此段代码的报错 汉语解释index.jsx:55 Uncaught TypeError: item.searchApi is not a function at searchQuery (index.jsx:55:1) at onFocus (index.jsx:129:1) at onContainerFocus (BaseSelect.js:326:1) at HTMLUnknownElement.callCallback (react-dom.development.js:188:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:237:1) at invokeGuardedCallback (react-dom.development.js:292:1) at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306:1) at executeDispatch (react-dom.development.js:389:1) at executeDispatchesInOrder (react-dom.development.js:414:1) at executeDispatchesAndRelease (react-dom.development.js:3278:1) at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287:1) at forEachAccumulated (react-dom.development.js:3259:1) at runEventsInBatch (react-dom.development.js:3304:1) at runExtractedPluginEventsInBatch (react-dom.development.js:3514:1) at handleTopLevel (react-dom.development.js:3558:1) at batchedEventUpdates$1 (react-dom.development.js:21871:1) at batchedEventUpdates (react-dom.development.js:795:1) at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568:1) at attemptToDispatchEvent (react-dom.development.js:4267:1) at dispatchEvent (react-dom.development.js:4189:1) at unstable_runWithPriority (scheduler.development.js:653:1) at runWithPriority$1 (react-dom.development.js:11039:1) at discreteUpdates$1 (react-dom.development.js:21887:1) at discreteUpdates (react-dom.development.js:806:1) at dispatchDiscreteEvent (react-dom.development.js:4168:1)
07-13
根据提供的代码，出现报错的原因是在 `item.searchApi` 中，`searchApi` 并不是一个函数。根据代码逻辑，`searchApi` 是一个使用 `commonService.orgPageList({})` 进行异步请求的 Promise 对象，它的结果会在 `then` 方法中进行处理。 然而，在这段代码中，`searchQuery` 函数中使用了 `item.searchApi()` 来调用这个函数，而实际上 `item.searchApi` 不是一个函数，所以会报错。 要解决这个问题，可以将 `searchQuery` 函数中的 `item.searchApi()` 替换为 `item.searchApi.then()`，并在 `then` 方法中处理结果。 以下是修改后的代码示例： ```jsx const searchQuery = (value) => { item.searchApi.then(res => { const { retData } = res; retData.map(item => { return { key: item.id, label: item.organName, value: item.id, }; }); }); }; // 其他代码... ``` 这样修改后，应该就能正确地调用异步请求并处理结果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

叁拾舞

你的鼓励将是我最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值