vis.js网络拓扑图第一个demo，vis-network.min.js的下载

在vis.js的中文文档里有个demo，复制粘贴出来跑跑，是可以运行的

地址：vis-network 入门 | Ame's blog

1.源码是这样的，粘贴出来就可以跑：

//源码
<html>
<head><script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script><style type="text/css">#mynetwork {width: 600px;height: 400px;border: 1px solid lightgray;}</style>
</head>
<body>
<div id="mynetwork"></div><script type="text/javascript">// 创建节点数据数组var 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" }]);// 创建边数据数组var edges = new vis.DataSet([{ from: 1, to: 3 },{ from: 1, to: 2 },{ from: 2, to: 4 },{ from: 2, to: 5 },{ from: 3, to: 3 }]);// 获取容器var container = document.getElementById('mynetwork');// 将数据赋值给vis 数据格式化器var data = {nodes: nodes,edges: edges};var options = {};// 初始化关系图var network = new vis.Network(container, data, options);
</script>
</body>
</html>

2. 大家可以在代码中看到vis-network.min.js是引用的网页版的，那么要怎么搞到js放到本地项目中呢？看下图

左边是跑出来的效果，右边是浏览器f12下找到js,然后ctrl+a,,,,ctrl+c将js复制粘贴，自己新建一个js文件将js粘贴进去就好了

vis.js网络拓扑图第一个demo，vis-network.min.js的下载相关推荐

vis.js网络拓扑图自定义图片
1.首先看一下我做的效果图: 2.在官方demo中找有自定义图片的例子:Vis Network Examples 3.点击进去发现只有demo,没有源码,,,,于是f12自己找 4.只需要添加下面代 ...
js桌面应用 Linux,从 1 到完美，用 js 和 electron 写一个桌面应用
从 1 到完美,用 js 和 electron 写一个桌面应用目前用 js 和前端技术写桌面软件的方案主要有两种:electron 和 nw.js.这两者在底层实现上有所不同,简单的说,electr ...
Form表单序列化Json插件-jquery.serializejson.min.js
Form表单参数序列化成Json对象: 1. 使用serializeJsonObject 2. jquery.serializejson.min.js 1. 使用serializeJsonObject ...
uploadify 报错jquery.uploadify.min.js:16 Uncaught TypeError: Cannot read property 'queueData' of undef
声明啊,我这个上传原来是已经可用的啦! jquery.uploadify.min.js:16 Uncaught TypeError: Cannot read property 'queueData' ...
echarts.min.js的引入
1)使用地址引入 <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></scr ...
visjs使用小记-1.创建一个简单的网络拓扑图
1.插件官网:http://visjs.org/ 2.创建一个简单的网络拓扑图 <!doctype html> <html> <head><title> ...
一个demo学会js
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
手机自动化测试工具Auto.js学习使用(附一个自动刷抖音类短视频的demo)
Auto.js学习使用介绍使用 1. 手机端安装auto.js 2.电脑下载vscode,安装插件 3.手机打开远程开发功能 4. vscode连接手机 5.进行开发(一个自动刷抖音类短视频的de ...
手把手教你安装鸿蒙和运行第一个Demo（js）版
鸿蒙开发初体验作者:坚果公众号:"大前端之旅" 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GVA成员之一,专注于大前端技术的分享,包括 ...

vis.js网络拓扑图第一个demo，vis-network.min.js的下载

vis.js网络拓扑图第一个demo，vis-network.min.js的下载相关推荐

最新文章

热门文章