vue 拓扑组件_vue 集成 vis-network 实现网络拓扑图的方法

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.png" },

{ id: 2, shape: "circularImage", image: DIR + "server.png" },

{ id: 3, shape: "circularImage", image: DIR + "server.png" },

{

id: 4,

shape: "circularImage",

image: DIR + "gather.png",

label: "pictures by this guy!"

},

{ id: 5, shape: "circularImage", image: DIR + "wanjet.png" },

{ id: 6, shape: "circularImage", image: DIR + "center.png" },

{ id: 7, shape: "circularImage", image: DIR + "cloud.png" },

{ id: 8, shape: "circularImage", image: DIR + "center.png" },

{ id: 9, shape: "circularImage", image: DIR + "wanjet.png" },

{ id: 10, shape: "circularImage", image: DIR + "gather.png" }

// { id: 11, shape: "circularImage", image: DIR + "11.png" },

// { id: 12, shape: "circularImage", image: DIR + "12.png" },

// { id: 13, shape: "circularImage", image: DIR + "13.png" },

// { id: 14, shape: "circularImage", image: DIR + "14.png" },

// {

// id: 15,

// shape: "circularImage",

// image: DIR + "missing.png",

// brokenImage: DIR + "missingBrokenImage.png",

// label: "when images\nfail\nto load"

// },

// {

// id: 16,

// shape: "circularImage",

// image: DIR + "anotherMissing.png",

// brokenImage: DIR + "9.png",

// label: "fallback image in action"

// }

];

let edges = [

{ from: 1, to: 4 },

{ from: 2, to: 4 },

{ from: 3, to: 4 },

{ from: 4, to: 5 },

{ from: 5, to: 6 },

{ from: 6, to: 7 },

{ from: 8, to: 7 },

{ from: 9, to: 8 },

{ from: 10, to: 9 }

// { from: 8, to: 10 },

// { from: 10, to: 11 },

// { from: 11, to: 12 },

// { from: 12, to: 13 },

// { from: 13, to: 14 },

// { from: 9, to: 16 }

];

for (let i = 1; i <= 100; i++) {

num = i + 10;

nodes.push({

id: num,

label: num.toString()

});

edges.push({ from: num, to: 10 });

}

let data = {

nodes: nodes,

edges: edges

};

let container = document.getElementById("mynetwork");

//let options = {};

let options = {

nodes: {

font: {

color: "white", //字体的颜色

size: 30 //显示字体大小

},

scaling: {

min: 16,

max: 32 //缩放效果比例

},

borderWidth: 0,

color: {

border: "white",

background: "white" //若是引用图标,背景颜色

}

},

groups: {

ws: {

//系统定义的形状 dot等 这些官网都可以找到

shape: "dot",

color: "white"

}

},

edges: {

//连接线的样式

color: {

color: "white",

highlight: "white",

hover: "#848484",

inherit: "from",

opacity: 1.0

}

},

layout: {

randomSeed: 1 //配置每次生成的节点位置都一样,参数为数字1、2等

},

physics: {

// barnesHut: { gravitationalConstant: -30000 },

barnesHut: {

gravitationalConstant: -80000,

springConstant: 0.001,

springLength: 200

},

stabilization: false

//{ iterations: 2500 }

},

interaction: {

// navigationButtons: true,

hover: true, //鼠标移过后加粗该节点和连接线

selectConnectedEdges: false, //选择节点后是否显示连接线

hoverConnectedEdges: false, //鼠标滑动节点后是否显示连接线

tooltipDelay: 200,

zoomView: true //是否能缩放画布

},

edges: {

shadow: true, //连接线阴影配置

smooth: true //是否显示方向箭头

// arrows: {to : true }//箭头指向from节点

}

};

that.network = new vis.Network(container, data, options);

that.network.on("click", function(params) {});

设置 stabilization: false 可以快速生成10000个节点

总结

以上所述是小编给大家介绍的vue 集成 vis-network 实现网络拓扑图的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

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

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

相关文章

编译器说 Lambda 表达式中的变量必须是 final 的,我偏不信

偶尔&#xff0c;我们需要在 Lambda 表达式中修改变量的值&#xff0c;但如果直接尝试修改的话&#xff0c;编译器不会视而不见听而不闻&#xff0c;它会警告我们说&#xff1a;“variable used in lambda expression should be final or effectively final”。 这个问题发生的…

window 事件

一、 onscroll ⇒ 页面滚动是事件 // 当页面发生滚动就会触发这个事件 window.onscroll function () {console.log(我会随着鼠标滚动改变); }二、 onresize ⇒ 窗口改变事件 // 当窗口大小发生改变就会触发这个事件 window.onresize function () {console.log(我会随着窗口…

pandas series取值_【小学生级】pandas入门到精通备查表——AI未来系列3

在未来面前&#xff0c;每个人都是学生江海升月明&#xff0c;天涯共此时&#xff0c;关注江时&#xff01;引子篇为AI未来系列第三篇&#xff0c;中阶部分开始。pandas的数据分析功能比excel强太多&#xff0c;基本上学会pandas&#xff0c;走遍天下都不怕。这是我的备查字典&…

java中为final变量赋值的几种方式

java中为final变量赋值的几种方式 前言 使用final修饰变量&#xff0c;很多人第一时间想到的就是不可变。然后以为变量必须得在声明的时候就为其赋初始值&#xff0c;其实不然&#xff0c;本文将详细讲解java中使用final修改的变量的赋值问题。 被final修饰的变量的几种赋值方…

instanceof 和 对象转型

一、instanceof 判断某个对象是否属于某个类 father1 instanceof Father; // true// 如果有子类继承父类的话 son instanceof Father; // true二、对象转型 子转父 > 自动转&#xff08;向下转型&#xff09; 父转子 > 强转&#xff08;向上转型&#xff09; 三、Obj…

java类验证和装载顺序_Java JVM类加载顺序详解

首页 > 基础教程 > 基础知识 > JDK&JRE&JVMJava JVM类加载顺序详解JVM加载就是寻找一个类或是一个接口的二进制形式并用该二进制形式来构造代表这个类或是这个接口的class对象的过程&#xff0c;其中类或接口的名称是给定了的。当然名称也可以通过计算得到&am…

从lambda表达式看final关键字

Variable used in lambda expression should be final or effectively final 想必大家在开发java程序的时候应该经常见到。 这是因为在lambda的匿名表达式里需要传入final的对象&#xff0c;那么这是为什么呢&#xff1f; 因为lambda是匿名表达式&#xff0c;它是在新开的一个…

linux中负载值为多少正常_Linux系统中load average平均负载

系统平均负载被定义为在特定时间间隔内运行队列中的平均进程数。如果一个进程满足以下条件则其就会位于运行队列中&#xff1a;1)它没有在等待I/O操作的结果2)它没有主动进入等待状态(也就是没有调用wait)3)没有被停止(例如&#xff1a;等待终止)英译文&#xff1a;http://blog…

lambda里面赋值局部变量必须是final原因

public class LambdaTest {public static void main(String ... args){int portNumber 1337;Runnable r ()-> {portNumber 1338;System.out.println(portNumber);};r.run();} }如上代码&#xff0c;lambda里面要访问局部变量会报如照片错误&#xff1a; 在介绍为什么会报…

classin安卓手机安装条件_ClassIn上课官方软件下载-ClassIn安卓版本 v3.0.7.1_5577安卓网...

ClassIn上课官方软件下载分享给大家。ClassIn在线互动教室是一对多直播互动教学平台&#xff01;培养学习能力更强大的学习者&#xff01;班级群课下互动答疑收发作业&#xff01;记录学习成长历程&#xff0c;展示学习成果&#xff01;【软件说明】欢迎使用ClassIn&#xff01…

lambda表达式或者匿名函数中为什么要求外部变量为final

1、参考博客 关于Lambda表达式里面修改外部变量问题JDK8之前&#xff0c;匿名内部类访问的局部变量为什么必须要用final修饰 2、匿名内部类 在jdk7之前&#xff0c;匿名内部类访问外部类的局部变量时&#xff0c;那么这个局部变量必须用final修饰符修饰&#xff0c;如下图1所…

location 和 history

Location 对象&#xff1a;封装了浏览器地址栏的 URL 信息 一、hash 返回 URL 中 hash(#后跟零个或者多个字符), 如果不包含, 返回空字符串 # 位置标识符 : 当前页面的位置信息, 比如: 跳转顶部 console.log(location.hash); // ""二、host : 返回服务器名称和端口…

ble芯片 全称_蓝牙芯片都有哪些厂商?一文解答

蓝牙5新标准是蓝牙技术自1999年诞生以来推出的第十个标准版本。其性能上大幅提升&#xff0c;可归结为&#xff1a;更快、更长、更给力&#xff0c;非常适合运用于无线可穿戴、工业和智能家居等领域。但蓝牙技术产品能否真正进人批量生产在于芯片制造技术能否跟得上&#xff0c…

你知道Java中final和static修饰的变量是在什么时候赋值的吗?

开始 一位朋友在群里问了这样一个问题&#xff1a; 本着乐于助人的想法&#xff0c;我当时给出的回答&#xff1a; 后来我总觉得哪里不对劲&#xff0c;仔细翻阅了《Java虚拟机规范》和《深入理解Java虚拟机》这一部分的内容&#xff0c;害&#xff01;发现自己理解的有问题。…

获取元素大小和位置的方式

一、直接获取元素样式属性值 – element.style.width console.log(div.style.width); // 500px console.log(parseInt(div.style.width)); // 500 console.log(typeof (div.style.width)); // string二、Offset 偏移量 offsetWidth width padding border offsetHeight he…

mybatis 取查询值_MyBatis-SELECT基本查询

1、返回一个LISTselect * from tbl_employee where last_name like #{lastName}2、将查询记录封装为一个Mapselect * from tbl_employee where id#{id}返回一条记录的map&#xff1b;key就是列名&#xff0c;值就是对应的值。3、多条记录封装为一个mapMapKey("id")pu…

ES6 里面的 class

ES5 对象的写法 let x 10,y 20;const obj {x: x,y: y,sum: function () {return this.x this.y;} };ES6 对象的写法 const obj {x,y,sum() {return this.x this.y;} };class 有点类似 java 的 class class Person { // 类名大写// 私有属性和方法 写在 construtor 里面…

normalize函数_Pandas 数据处理(一) —— 几个简单函数掌握!

对于 Pandas&#xff0c; 接触过 Python 数据处理的小伙伴们都应该挺熟悉的&#xff0c;做数据处理不可或缺的一个程序包&#xff0c;最大的特点高效&#xff0c;本篇文章将通过案例介绍一下 Pandas 的一些基础使用&#xff01;1&#xff0c;读入数据大部分数据都可以用 read_c…

Java Collections.emptyList() 方法的使用及注意事项

Java Collections.emptyList方法的使用及注意事项 一、emptyList() 作用&#xff1a;返回一个空的List&#xff08;使用前提是不会再对返回的list进行增加和删除操作&#xff09;&#xff1b;好处&#xff1a; 1. new ArrayList()创建时有初始大小&#xff0c;占用内存&#…

git 生成多个patch_详解如何使用git 生成patch 和打入patch

平时我们在使用git 管理项目的时候&#xff0c;会遇到这样一种情况&#xff0c;那就是客户使用git 生成patch 给到我们&#xff0c;那我们就需要把客户给到patch 打入到我们的project &#xff0c;基于这样一个场景&#xff0c;我把git 如何生成patch 和如何打入patch 做总结生…