vis.js network操作学习

前言

网络是显示网络以及由节点和边组成的网络的可视化。可视化易于使用,并支持自定义形状、样式、颜色、尺寸、图像等。网络可视化可以在任何现代浏览器上顺利运行,最多可显示数千个节点和边缘。为了处理大量节点,网络提供了集群支持。Network 使用 HTML 画布进行渲染。

一、简单的例子

①引入 vis-network.js 和 vis-network.css 文件,您可以从 visjs.org下载这些文件,从unpkg.com链接它们 或从npm package 要求/导入 。

②指定节点和边,还可以使用 vis.DataSets 进行动态数据绑定,例如,在初始化网络后更改颜色、标签或任何选项。

③获得数据后,需要一个容器 div 来告诉 vis 将网络放置在哪里。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html,body {width: 100%;height: 100%;margin: 0;padding: 0;}#mynetwork {position: relative;width: 100%;height: 100%;/* border: 1px solid lightgray; */}</style>
</head><body><div id="mynetwork"></div>
</body><!-- 该示例中,script代码中需要获取DOM元素,因此要将script代码放在body之后 -->
<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script><script type="text/javascript">// create an array with nodesvar nodes = new vis.DataSet([{ id: 1, label: "Node 1" },{ id: 2, label: "Node 2" },{ id: 3, label: "Node 3" },{ id: 4, label: "Node 4" },{ id: 5, label: "Node 5" }]);// create an array with edgesvar edges = new vis.DataSet([{ from: 1, to: 3 },{ from: 1, to: 2 },{ from: 2, to: 4 },{ from: 2, to: 5 },{ from: 3, to: 3 }]);// create a networkvar container = document.getElementById("mynetwork");var data = {nodes: nodes,edges: edges};var options = {};var network = new vis.Network(container, data, options);
</script></html>

二、模块学习

1、configure

生成具有过滤功能的交互式选项编辑器。

var options = {configure: {// 配置界面开关 如果为false 即使设置了configure 界面上也不会有设置选项的面板enabled: true,// 节点和边的配置filter: 'nodes,edges, layout, interaction, manipulation, physics, selection, renderer',// 将配置面板放置在DOM元素中container:document.getElementById("configuration"),// 生成选项按钮在配置器的底部showButton: true}};

2、manipulation

提供 API 和可选 GUI 来更改网络中的数据。

var options = {manipulation: {// 操纵节点和边的选项按钮 有新增节点 新增边enabled: true,// true工具栏可见 false编辑按钮可见 点击后 工具栏可见initiallyActive: false,// 当您提供布尔值时,您只需切换操纵系统 GUI 上的“添加节点”按钮。缺少处理函数可能会影响使用这些方法时的 API。// addNode: true,addEdge: true,// 当提供函数时,当用户在“addNode”模式下单击画布时将调用该函数。该函数将接收两个变量:可以创建的节点的属性和回调函数。如果使用新节点的属性调用回调函数,则会添加该节点。addNode: function (nodeData, callback) {nodeData.label = 'hello world';callback(nodeData);},// 仅当处理函数被提供,编辑节点操作才可用editNode: undefined,editEdge: true,deleteNode: true,deleteEdge: true,// 节点模块提供的所有方法都是可用的controlNodeStyle: {shape: 'diamond',size: 6,color: {background: '#3c3c3c',border: '#3c3c3c',highlight: {background: '#3c3c3c',border: '#3c3c3c'}},borderWidth: 4,borderWidthSelected: 2}}};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/521092.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ospf虚链路实验简述

1、ospf虚链路实验简述 ospf虚链路配置 为解决普通区域不在骨干区域旁&#xff0c;通过配置Vlink-peer实现不同区域网络设备之间建立逻辑上的连接。 实验拓扑图 r1: sys sysname r1 undo info enable int loopb 0 ip add 1.1.1.1 32 ip add 200.200.200.200 32 quit int e0/0/…

捕获SpringSecurity异常,进行统一返回

无法捕获SpringSecurity的认证和鉴权中发生异常的原因 使用ControllerAdvice的全局异常处理器无法捕获到SpringSecurity中的异常&#xff0c;原因如下&#xff1a; 在SpringSecurity中&#xff0c;如果认证或者授权的过程中出现了异常会被ExceptionTranslationFilter捕获到。…

A Multimodal Transfer Learning Approach for Medical Image Classification

是否可训练可用&#x1f525;和❄表示&#xff0c;这样更美观 辅助信息 作者未提供代码

论文阅读:Scalable Diffusion Models with Transformers

Scalable Diffusion Models with Transformers 论文链接 介绍 传统的扩散模型基于一个U-Net骨架&#xff0c;这篇文章提出了一种新的扩散模型结构&#xff0c;将U-Net替换为一个transformer&#xff0c;并将这种结构称为Diffusion Transformers (DiTs)。他们还发现&#xff…

2024最新GPT4.0使用教程,AI绘画,一站式解决

一、前言 ChatGPT3.5、GPT4.0、GPT语音对话、Midjourney绘画&#xff0c;文档对话总结DALL-E3文生图&#xff0c;相信对大家应该不感到陌生吧&#xff1f;简单来说&#xff0c;GPT-4技术比之前的GPT-3.5相对来说更加智能&#xff0c;会根据用户的要求生成多种内容甚至也可以和…

什么是系统工程(字幕)47

0 00:00:01,940 --> 00:00:05,770 下一个图是16.28 1 00:00:06,070 --> 00:00:07,170 2 00:00:07,860 --> 00:00:09,740 它把这个 3 00:00:10,020 --> 00:00:12,210 控制器&#xff0c;还有用户界面 4 00:00:12,210 --> 00:00:15,130 加到这个IBD里面去了 5…

简介:图灵机和图灵测试

一、图灵机&#xff08;Turing machine&#xff09; 图灵机&#xff08;Turing machine&#xff09;是由英国数学家Alan Turing于1936年提出的一种抽象计算模型&#xff0c;阿兰图灵在24岁时发表论文《On Computable Numbers, with an Application to the Entscheidungsproble…

yudao-cloud 学习笔记

前端代码 浏览器打开 https://cloud.iocoder.cn/intro/ F12 执行代码 var aaa $(".sidebar-group-items").find("a"); var ll[]; var tt[]; for(var i0;i<aaa.length;i ){ ll.push("https://doc.iocoder.cn" $(aaa[i]).attr("href&quo…

一文读懂私网解析 PrivateZone

越来越多的企业认同&#xff0c;多云和混合云是实现数字化变革的必由之路。Cisco 发布的《2022 Global Hybrid Cloud Trends Report》显示&#xff0c; 82% 的受访者使用混合多云架构来支撑其应用程序。混合云架构下&#xff0c;如何灵活、可靠且低成本地满足各种场景 DNS 的解…

Unity性能优化篇(十一) 动画优化

1.恰当地设置Animator组件的Culling Mode。Always Animate表示如果该动画不可见&#xff0c;也会播放它。Cull Update Transformations表示如果该动画不可见&#xff0c;则不会渲染该动画&#xff0c;但是依然会根据该动画的播放来改变游戏对象的位置、旋转、缩放&#xff0c;这…

MySQL常见的索引类型介绍

我将为您详细讲解 MySQL 中常见的索引类型&#xff0c;以及它们的使用场景、特点、区别和优势。索引是提高数据库查询性能的关键工具&#xff0c;它可以加速数据检索速度&#xff0c;减少服务器的负担。在 MySQL 中&#xff0c;索引类型主要包括 B-Tree 索引、哈希索引、全文索…

数字人播报解决方案,支持形象定制化

随着数字化浪潮的持续推进&#xff0c;企业对高效、精准的播报解决方案的需求日益增长&#xff0c;美摄科技凭借其领先的数字人播报解决方案&#xff0c;为企业带来了前所未有的播报体验。该方案集主播视频编辑工具、灵活的部署式、智能合成、唇音同步/动作表达以及可定制主播形…