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


Posted in Javascript onAugust 07, 2019

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 实现网络拓扑图的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript new后的constructor属性
Aug 05 Javascript
浅说js变量
May 25 Javascript
javascript Event对象详解及使用示例
Nov 22 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
Sort()函数的多种用法
Mar 20 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
详解Vue This$Store总结
Dec 17 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
vue项目中使用bpmn-自定义platter的示例代码
May 11 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 #Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 #Javascript
javascript for循环性能测试示例
Aug 07 #Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 #Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 #Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 #Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 #Javascript
You might like
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
两个php日期控制类实例
2014/12/09 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
简单解析JavaScript中的__proto__属性
2016/05/10 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
python实现教务管理系统
2018/03/12 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
pycharm导入源码的具体步骤
2020/08/04 Python
浅析python实现动态规划背包问题
2020/12/31 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
计算机专业个人求职自荐信
2013/09/21 职场文书
财务会计应届生求职信
2013/11/24 职场文书
办公室文书岗位职责
2013/12/16 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
英语感谢信范文
2015/01/20 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python