vis.js network 教程一

我们使用visjs的网络图可以实现类似csdn知识库的功能。

首先我们先看一个官方的demo：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>vis.js</title>
    <script type="text/javascript" src="/js/vis.min.js"></script>
    <link href="/css/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">
      // 创建节点数组
      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}]);

      // 创建一个网络
      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>

完成一个最简单的网络图，需要两个资源文件：

vis.js

vis.css

下载地址：http://visjs.org/#download_install

如上图所示，数据包括：nodes（节点）、edges（关系，英文直译为边缘、优势，这边我个人觉得关系比较贴切）

初始化网络图方法：

var network = new vis.Network(container, data, options);

其中，container为容器，data为数据,options为选项

而最终展示的图片实际上是在html5的画布上的。

1.模块

（1）配置

enabled：boolean型参数，默认为true。用于切换配置界面的开关。

filter：类型可以为String、array、boolean、function。如果为boolean型，那么所有选项会被显示，否则一个都不会显示。如果是一个String类型，那么可选项为nodes, edges, layout, interaction, manipulation, physics, selection, renderer。如果是一个数组，那么前面提到的字段可多选。如果是个方法，且返回true，那么选项就会被展示。

container：容器

showButton:boolean型,是否显示按钮。

将options替换如下

var options = {configure: {enabled: true,
        filter: 'physics',
        container: undefined,
        showButton: true
    }
}

页面中会多出如下的配置：

（2）选项

autoResize：boolean，自适应大小，如果为真，则网络将自动检测其容器的大小，并自动重绘。如果为false，则可以使用redraw（）和setSize（）函数调整容器的大小后，网络会被强制重新绘制。

width：画布宽度

height：画布高度

locale：区域设置，默认为“en”

locales:可自定义

clickToUse：默认为false，当网络配置为clickToUse，它将仅在活动时对鼠标和触摸事件做出反应。激活时，网络周围会显示蓝色阴影边框。通过点击网络将网络设置为活动，然后通过点击网络外部或按ESC键将其更改为无效

当设置clickToUse为true时，点击节点画布会被选中，点击esc键可取消选中。

其他模块后续说明。

vis.js network 教程一相关推荐

vis.js network，基本教程
这两天用到vis,写一个拖拽的效果,发现vis类的博客文章都特别少,可能用的人还不是特别的,vis目前没有中文文档,英文不好的同学可能有些头痛了,今天我给大家分享一下vis等经验. 1.第一步,先下载 ...
vis.js network 教程二 edges
arrows:箭头 arrows.to:箭头指向 arrows.to.enabled:箭头开关,如果设置为true,则显示关系末端增加箭头 arrows.to.scaleFactor:修改箭头大小 a ...
手把手教你使用vue创建第一个vis.js
先看一下实现效果吧 ,如下图 : 为什么要写这篇文章呢?因为之前有浅浅的了解一下vis.js,后期开发中没有使用vis,所以太深奥的也不懂,但是当时是用js写的.这两天有人问我用vue怎么写,然后 ...
Web前端文档阅读笔记-vis.js动态添加节点（vue cli环境）
这里主要是针对vis的network图进行节点动态添加图用的是vis.js,表单使用的是element-ui 程序运行截图如下: 添加一个节点: 这里是不需要刷新页面就能添加的. 程序结构如下: 关 ...
vis.js网络拓扑图第一个demo，vis-network.min.js的下载
在vis.js的中文文档里有个demo,复制粘贴出来跑跑,是可以运行的地址:vis-network 入门 | Ame's blog 1.源码是这样的,粘贴出来就可以跑: //源码 <html& ...
vis.js的研究之路
把vis.js官网的知识点(我自己用到的)按照自己的理解做一个总结 1.最基本的线路图 <!doctype html> <html> <head><title ...
基于vis.js的动态流量的封装
分享关于vis.js的动态流量的封装,是基于网上在github中vis.js的issues一位大神分享的代码的基础上继续做了部分改动封装效果是一个小球在需要动态流量的连接线上滚动,颜色大小方向都可以 ...
AUTOCAD自学教程一
AUTOCAD自学教程一 AUTOCAD自学教程在学习任何一款软件的时候,第一步也是非常必要的一步就是如何的安装软件. 下面我们讲解如何的安装这个软件. 1.安装autocad 2.安装产品 3.正 ...
pytorch打印模型参数_Pytorch网络压缩系列教程一:Prune你的模型
Pytorch网络压缩系列教程一:Prune你的模型本文由林大佬原创,转载请注明出处,来自腾讯.阿里等一线AI算法工程师组成的QQ交流群欢迎你的加入: 1037662480 深度学习模型取得了前所未 ...

vis.js network 教程一

vis.js network 教程一相关推荐

最新文章

热门文章