vis.js介绍

Vis.js是一个动态的、基于浏览器的可视化库,可处理大量的动态数据并能与这些数据进行交互操作。该项目包含 DataSet、Timeline, 和 Graph(2d和3d)。
Vis.js是由Almende B.V公司开发的开源项目,基于Canvas绘制web可视化图形图表,简单易用,功能强大。
下面是vis.js的模块:
这里写图片描述
数据集(DataSet):
灵活的键/值对,可添加、更新和删除项目。DataSet可以过滤和订制项目,转换项目领域。Vis.js带有一个灵活的数据集,其可以用于保持和操纵非结构化数据并监听数据的变化。该数据集是基于键/值对的。数据项可以被添加,从DataSet更新和删除,并且可以订阅DataSet中的变化。数据集中的数据可以被过滤和排序,以及字段(例如日期)可以被转换为特定的类型。

图表(Graph):
显示2d图形或网络。
画出一个交互式图形时间轴和条形图并以想要的方式进行个性化。
这里写图片描述
特点:
支持折线图、条形图、堆叠图、散点图样式;支持在图形上添加文字、数轴定制、切换图形组、自定义范围等。图形美观,可组合使用,个性化定制。与时间轴模块结合使用产生可伸缩式的数据展示方式。

显示3d图形或网络:
这里写图片描述

时间轴(Timeline):
显示不同类型的时间轴上的数据。在时间轴上的时间和项可以交互移动、缩放及控制。丰富的时间轴样式和交互是其最大的特点。
这里写图片描述

网络图:
简单到复杂的可定制样式非常丰富,有较强的交互性。支持大量数据的展示,可动态更新数据动态渲染图形(大赞),支持JSON数据导入。可动态配置样式。
这里写图片描述

小结:
基本图表如折线图、柱状图等的使用不如同为基于Canvas的echarts图表种类多而全,echarts也相对更美观易用,但是vis.js有多种的3D图表,如果需要展示3D效果可以使用vis.js。
vis.js的网络关系图样式使用D3.js也是可以做的,只不过vis.js有一些做好的示例效果非常不错,包括过渡动画,布局,样式等都比D3.js要好一些。vis.js是基于Canvas的,而D3.js是基于SVG的,所以在应用场景上可根据需求选择相对合适的一个。
vis.js的时间轴很不错,需要时间轴的组件或者展示,可以用vis.js来做。

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vis.js是一个用于可视化网络、图表和数据的JavaScript库。它提供了许多功能,包括节点移动和位置设置。以下是vis.js节点移动相关的教程。 1. 开始使用vis.js 在开始使用vis.js之前,需要引入vis.js库和vis.css样式文件。可以从vis.js官方网站上下载最新版本的vis.js库和vis.css样式文件,然后将它们添加到HTML页面中。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vis.js Node Move Tutorial</title> <link rel="stylesheet" type="text/css" href="vis.css"> <script type="text/javascript" src="vis.js"></script> </head> <body> <div id="network"></div> <script type="text/javascript"> // your code here </script> </body> </html> ``` 2. 创建一个简单的网络 在vis.js中,可以使用vis.Network对象来创建网络。首先,需要创建一个HTML元素,用于显示网络。然后,可以创建一个vis.Network对象,将其绑定到该HTML元素,并设置节点和边的数据。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vis.js Node Move Tutorial</title> <link rel="stylesheet" type="text/css" href="vis.css"> <script type="text/javascript" src="vis.js"></script> </head> <body> <div id="network"></div> <script type="text/javascript"> // create an array with nodes 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'} ]); // create an array with edges var edges = new vis.DataSet([ {from: 1, to: 2}, {from: 1, to: 3}, {from: 2, to: 4}, {from: 2, to: 5} ]); // create a network var container = document.getElementById('network'); var data = {nodes: nodes, edges: edges}; var options = {}; var network = new vis.Network(container, data, options); </script> </body> </html> ``` 3. 启用节点移动 要启用节点移动,需要在创建vis.Network对象时,将moveable选项设置为true。可以通过options对象来设置该选项。 ```javascript var options = {moveable: true}; var network = new vis.Network(container, data, options); ``` 现在,可以在网络中拖动节点并放置到新的位置。 4. 监听节点移动事件 如果希望在节点移动时执行一些代码,可以监听节点移动事件。可以通过vis.Network对象的on方法来注册事件处理程序。 ```javascript network.on('dragEnd', function(params) { console.log(params.nodes[0] + ' was moved to x:' + params.pointer.canvas.x + ', y:' + params.pointer.canvas.y); }); ``` 上面的代码将在节点移动结束时,将节点ID和新位置的坐标输出到控制台。 5. 限制节点移动范围 有时,希望限制节点移动的范围,以保持网络的视觉效果。可以通过设置节点位置的边界来实现。可以在options对象中设置nodes选项,将其设置为一个对象,该对象包含每个节点的初始位置和位置边界。 ```javascript var options = { moveable: true, nodes: { 1: {x: 100, y: 100, fixed: true, borderWidth: 1, shape: 'circle', color: {background:'red', border:'black'}}, 2: {x: 300, y: 100, borderWidth: 1, shape: 'circle', color: {background:'blue', border:'black'}, physics: false}, 3: {x: 100, y: 300, borderWidth: 1, shape: 'circle', color: {background:'green', border:'black'}, physics: false}, 4: {x: 300, y: 300, borderWidth: 1, shape: 'circle', color: {background:'yellow', border:'black'}, physics: false} } }; ``` 如上所示,节点1的位置已经被固定,而其他节点则没有被固定,并且可以在屏幕上移动。 6. 停用节点移动 要停用节点移动,设置moveable选项为false即可。 ```javascript var options = {moveable: false}; var network = new vis.Network(container, data, options); ``` 现在,节点将无法移动。 以上就是vis.js节点移动相关的教程。通过这些教程,您可以在vis.js中轻松地启用节点移动,监听节点移动事件,限制节点移动范围,并停用节点移动。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值