vis network（visjs）安装简单使用

vis.js可视化的出发点之一是它们可以处理动态数据，并允许对数据进行操作。为了实现这一点，vis.js包括一个基于灵活键/值 DataSet并DataView处理非结构化JSON数据的功能。

数据集DataSet，存储JSON的ID对象。可增删改查，过滤排序…
资料检视DataView，提供数据集上经过过滤或格式化的视图。通过订阅DataView中的更改，获取过滤或格式化的数据，而无需一直指定过滤器和字段类型
数据管道DataPipe,DataPipe从一个DataSet 获取数据DataView，对其进行转换并传入第二个 DataSet，用于强制数据类型，更改结构…

一、总结

Vis.js 是一个动态的，基于浏览器的可视化库。该库被设计为易于使用，能处理大量的动态数据。该库由以下几部分组成：

一是数据集和数据视图，基于灵活的键/值数据集，可以添加，更新和删除项目，订阅数据集变化；
二是时间轴，用于显示不同类型的时间轴数据，在时间轴上项目可以交互移动，缩放和操纵；
三是图形，使用节点和边显示一个交互式图形或网络。

二、配置&使用

1.vis-network 入门

安装

# v4.21.0 不再维护
npm install vis
# v9.0.1 建议使用下面这个
npm install vis-network

引入 vis-network

<template><div id="mynetwork" class="mynetwork"></div>
</template><script>
//v4.21.0
import * as vis from "vis";
export default {data() {return { network: null };},mounted() {this.init();},methods: {init() {// 节点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([{ id: 1, from: 1, to: 3 },{ id: 2, from: 1, to: 3 },{ id: 5, from: 3, to: 1 },{ 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 = {};this.network = new vis.Network(container, data,options);},},
};
</script><style scoped>
.mynetwork {height: 100%;
}
</style>

发现问题： v9.0.1，vue + vis-network，当 vis.network 存储在 data 中时，可新增节点，但新增边时，导致图形消失，console无报错

原因：

解决：

将 vis.network 对象移出 data() 方法
调整 vis.network ，使其不再使用原型链，所有选项折叠成一个对象（不推荐，具体请移步参考链接）

参考：https://github.com/almende/vis/issues/2567

v9.0.1使用

<template><div id="mynetwork" class="mynetwork"></div>
</template><script>
// import * as vis from "vis-network";
const vis = require("vis-network/dist/vis-network.min.js");
// require("vis-network/dist/vis-network.min.css");
/*
*将 `vis.network` 对象移出 `data()` 方法
*/
var network = null;
export default {data() {return {};},mounted() {this.init();},methods: {init() {// 节点var nodes = new vis.DataSet([{ id: 1, label: "Node 1", title: "1111" },{ 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([{ id: 1, from: 1, to: 3 },{ id: 2, from: 1, to: 3 },{ id: 5, from: 3, to: 1 },{ 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 = {};network = new vis.Network(container, data, options);nodes.add({ id: 6, label: "Node 6" });network.on("click", function(e) {console.log(e);edges.add({ from: 3, to: 2 });});},},
};
</script><style scoped>
.mynetwork {height: 100%;
}
</style>

效果如下

html页面使用

<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>

二、配置项

三、公共API

四、事件监听

五、自定义右键菜单

vis network（visjs）安装简单使用相关推荐

二、vis network配置项
配置项往往默认的格式无法达到设计的效果,这时候就需要手动修改配置项以实现ui和交互 var options = {autoResize: true,height: '100%',width: '10 ...
Vue.js中使用vis network出现的点和线更新问题
发现问题有一段时间,中文网一直没搜到结果,最终还是在github的已关闭issue里翻出了历史答案,简单翻译其中回答的部分内容,记录如下. 1.环境前端工程vue.js,版本2.6.11. vis- ...
MyCat笔记(二)：MyCat 安装简单使用(Linux版)
MyCat 官网:http://www.mycat.io/ 1.准备工作 1.MyCat版本:1.6.x 点击下载 2.数据库(MySQL为例,支持主从复制 ) 主从复制教程:My ...
小程序源码：云开发表情包制作神器-多玩法安装简单
该款小程序是一个表情包制作内容毕竟丰富,另外自定义制作方面也是特别的自由支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择这是一款云开发的小程序,但是安装还是挺简单的搭建教程: 首先使 ...
小程序源码：宝宝起名神器微信小程序源码下载-多玩法安装简单
这款小程序支持输入姓氏自动起名,不满意还可以点击换一换来找到满意的支持起两个字或者三个字的名字另外小编也给该款小程序添加了几个流量给大家下面就来看看小编的测试演示图吧! 小程序源码下载地址:小程 ...
BP神经网络（Back Propagation Neural Network）Matlab简单实现
BP神经网络(Back Propagation Neural Network)Matlab简单实现前言简单了解反向传播(Backwarod Propagation)机制(链式法则) 实例分析前向 ...
小程序源码：AI微信小程序源码下载人脸照片AI转换动漫照片全新源码安装简单无需服务器域名-多玩法安装简单
这是一款AI人脸转动漫的一款微信小程序源码该款小程序源码无需服务器和域名搭建安装简单有多种风格转换模式可自选安装教程: 首先解压源码然后把源码上传到微信开发者工具打开另外设置一个合法域名合 ...
小程序源码：全新实用工具证件照制作-多玩法安装简单
这是一款证件照制作的微信小程序,里面也支持直接微信公众号版本生成安装支持多种尺寸制作支持相册上传于直接相机拍摄支持多种类型的证件制作如,职业证件,公务员证件,身份证等各种类型支持电子照存档等等 ...
小程序源码：全新动态视频壁纸-多玩法安装简单
这是一款主打动态视频壁纸的一款微信小程序源码当然啦,里面也是有静态壁纸的其实这款小程序也可以说是短视频小程序都可以该款小程序全采集,另外支持多种流量主大家应该知道小编之前也发过一款动态壁纸的小 ...

vis network（visjs）安装简单使用

一、总结

二、配置&使用

1.vis-network 入门

v9.0.1使用

二、配置项

三、公共API

四、事件监听

五、自定义右键菜单

vis network（visjs）安装简单使用相关推荐

最新文章

热门文章

vis network（visjs）安装简单使用

一、总结

二、配置&使用

1.vis-network 入门

v9.0.1使用

二、 配置项

三、 公共API

四、 事件监听

五、自定义右键菜单

vis network（visjs）安装简单使用相关推荐

最新文章

热门文章

二、配置项

三、公共API

四、事件监听