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 继承详解(三)
Jul 13 Javascript
jquery.validate使用攻略 第二部
Jul 01 Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
javascript框架设计之类工厂
Jun 23 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
JS实现购物车基本功能
Nov 08 Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
弱类型语言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和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
javascript 鼠标拖动图标技术
2010/02/07 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
Python判断Abundant Number的方法
2015/06/15 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
python如何调用java类
2020/07/05 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
大学生职业生涯规划书模板
2014/01/03 职场文书
安全教育实施方案
2014/03/02 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
课外活动实习计划
2015/01/19 职场文书
会计主管竞聘书
2015/09/15 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
2019通用版导游词范本!
2019/08/07 职场文书
Python中Permission denied的解决方案
2021/04/02 Python
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫
python小型的音频操作库mp3Play
2022/04/24 Python
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android