vis.js的研究之路

已于 2023-04-03 17:37:25 修改
阅读量1.2k 收藏 8
点赞数
分类专栏： Java 文章标签： vis.js
于 2019-03-21 11:32:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hzkcsdnmm/article/details/88707402
版权

把vis.js官网的知识点(我自己用到的)按照自己的理解做一个总结

1.最基本的线路图

<!doctype html>
<html>
<head>
  <title>Network | Basic usage</title>

  <script type="text/javascript" src="./plugins/vis-4.0/vis.js"></script>
  <link href="./plugins/vis-4.0/vis.min.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
    #mynetwork {
      width: 600px;
      height: 400px;
      border: 1px solid lightgray;
    }
  </style>
</head>
<body>

<div id="mynetwork"></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: 3},
    {from: 1, to: 2},
    {from: 2, to: 4},
    {from: 2, to: 5},
    {from: 3, to: 3}
  ]);

  // create a network
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {};
  var network = new vis.Network(container, data, options);
</script>


</body>
</html>

2.然后如果你想给个别节点改变颜色或形状的话

如果想给全部节点改变颜色或形状要在options中写（且上面的优先级高）

可以选择的形状有：

如果想把节点分类改变颜色或形状：

3.如果想给边添加箭头的话：

如果想改变边的颜色的话也是使用color属性即可，这里说一个比较实用的继承指定节点颜色的机制

有时我们需要在边上添加注释内容

4.如果你细心的话你会发现每次描绘的图形整体结构是有差异的，如果你不想让它老变的话可以这样做：

呼叫冰河谷
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vis.js教程（一）：基础教程
WwLK123的博客
09-24 1630
该库由 DataSet、Timeline、Network、Graph2d 和 Graph3d 组件组成。该库的设计易于使用，能够处理大量动态数据，并能够对数据进行。一个动态的、基于浏览器的可视化库。
脚本类vis.js
04-28
标题“脚本类vis.js”暗示我们将讨论的是如何在JavaScript代码中使用vis.js库来实现各种可视化的功能。 ** vis.js 的主要组件 ** 1. **Timeline**: 这是vis.js的核心部分，它允许用户以时间轴的形式展示和操作事件...
vis.js介绍
DCX_abc的博客
09-30 7049
Vis.js是一个动态的、基于浏览器的可视化库，可处理大量的动态数据并能与这些数据进行交互操作。该项目包含 DataSet、Timeline, 和 Graph（2d和3d）。 Vis.js是由Almende B.V公司开发的开源项目，基于Canvas绘制web可视化图形图表，简单易用，功能强大。 下面是vis.js的模块： 数据集（DataSet）： 灵活的键/值对，可添加、更
强大的可视化库——Vis.js
最新发布
gitblog_00093的博客
05-10 664
强大的可视化库——Vis.js 项目地址:https://gitcode.com/almende/vis :exclamation: 注意：本项目已不再维护！我们建议您转向 Visjs 社区的开源库。 Vis.js 是一个功能强大的浏览器端数据可视化工坊，专门设计用于处理大量动态数据，并支持数据交互操作。这个库由以下组件组成： DataSet 和 DataView：灵活的数据集，支持添加、更新...
初识vis.js网络拓扑图,首先了解一下官方文档以及vis.js的中文文档
笑到世界都狼狈的博客
09-09 1万+
首先说明一下，为什么要学习这个东西，，，，因为我们项目中要做一个网络拓扑图，去年网上找了找用jtopo做的，然后大家说太丑了，操作也不好，反正言外之意就是要换个插件写，，，，然后我前两周就研究了一下echarts的树图和关系图graph,研究的结果我博客也有写，总的来说echarts蛮漂亮的，但是偏展示，后期如果要加很多扩展内容的话，不建议用。如果有需要可以去看echarts例子的可以去看看https://blog.csdn.net/qq_36509946/category_10330384.html 接
vis.js力导向图第二弹——固定节点
toBeMN的博客
11-16 4663
正经学徒，佛系记录，不搞事情 基于上文：https://blog.csdn.net/qq_31748587/article/details/84142527 的项目 力导向图由于力的作用，导致即使平衡后，拖拽节点依然会导致所有节点重新回到平衡状态，当数据量足够大时，甚至会出现遮挡、拖拽后节点弹到别的地方等问题 为了使vis既能保持力导向图的效果，又能在拖拽节点后节点可以固定不动 这里设计了...
Visjs一款开源可视化库
m0_62684754的博客
11-05 722
时间轴组件
vis.js-intermediate-6.1:中级Visualize.js示例
05-12
**vis.js 中级示例详解** `vis.js` 是一个强大的开源JavaScript库，主要用于数据可视化。...通过研究这个示例，开发者可以提升自己在JavaScript和数据可视化的技能，同时也能了解到`vis.js`的强大功能和灵活性。
NetworkPrototype:基于vis.js的Folksome网络原型
05-06
**网络原型设计与vis.js库** 在网络开发中，网络原型是一种用于模拟和展示网络结构、数据流或交互方式的...无论是在学术研究、产品设计还是IT运维中，vis.js都能发挥其强大的可视化能力，为网络相关的工作带来便利。
毕业设计源码小酒馆VIS.zip
10-09
【标题】"毕业设计源码小酒馆VIS.zip"是一个包含毕业设计项目源代码的压缩文件，名为"小酒馆VIS"。这个项目可能是一个模拟经营类的软件，旨在为用户提供一个虚拟酒馆的管理体验。从“小酒馆VIS”这个名字我们可以...
open-vis.github.io:OpenVis 的登陆页面
06-07
在`open-vis.github.io-master`这个压缩包文件中，我们可以期待找到构成OpenVis登陆页面的所有源代码，包括HTML文件（如`index.html`）、CSS样式文件（如`style.css`）以及可能的JavaScript脚本（如`script.js`）。...
【JS】vis.js使用之vis-timeline使用攻略，vis-timeline在vue3中实现时间轴、甘特图
余浩的博客
04-18 7248
`vis-timeline`时间轴是一个交互式可视化图表，用于实时可视化时间数据。数据项可以只与某个时间点关联，也可以有开始和结束日期（即一个时间范围）。vis-timeline可以通过拖拽和滚动时间轴自由移动和缩放。可以在时间轴中创建、编辑和删除数据项目。轴上的时间尺度是自动调整的，支持从毫秒到年的尺度。 vis-time时间轴使用常规`HTML DOM`呈现时间轴和放在时间轴上的项目，这样的好处就是可以使用自定义css样式进行灵活定制。
手把手教你使用vue创建第一个vis.js
笑到世界都狼狈的博客
03-16 1960
手把手教你使用vue搭建第一个vis.js项目，npm install vis安装以及import导入vis
Vis.js教程（二）：基础关系图实现
WwLK123的博客
12-05 1076
Vis.js的基础关系图使用
vis.js力导向图第一弹——基本展示
toBeMN的博客
11-16 6938
正经学徒，佛系记录，不搞事情 一、什么是vis.js vis.js是一个前端可视化框架，官方文档位置：http://visjs.org/docs/network/ 力导向图（Force-Directed Graph），是绘图的一种算法。在二维或三维空间里配置节点，节点之间用线连接，称为连线。各连线的长度几乎相等，且尽可能不相交。节点和连线都被施加了力的作用，力是根据节点和连线的相对位置计算的...
Vis.js使用
热门推荐
hkm的博客
12-29 1万+
Vis.js的使用 vis.js 基于浏览器的动态可视化库。该库被设计为易于使用，处理大量的动态数据，并支持对数据的操作和交互。该库由组件DataSet，Timeline，Network，Graph2d和Graph3d组成。这里主要用到Network（网状图） network实例请参考官网：http://visjs.org/network_examples.html。 network是一种可...
用vis.js库实现Neo4j的可视化
Mr.Write的博客
05-08 1万+
用vis.js库实现Neo4j的可视化用visjs库实现Neo4j的可视化 visjs简介 功能需求 实现步骤获取查询结果 转换数据格式 指定绘图容器 配置绘图参数 绘图实例参考 最终结果 总结vis.js简介vis.js是一个基于浏览器的动态可视化库，这个可视化库易于上手使用，而且可以处理高量级的动态数据，并且能够与数据进行交互。vis.js由五部分组成： **DataSet** **Timeli
vis.js在vue代码中的应用
蓝格子云
03-06 426
vis.js应用
vis.js节点移动相关教程
04-04
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中轻松地启用节点移动，监听节点移动事件，限制节点移动范围，并停用节点移动。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值