vis.js network 教程一

来源：互联网发布：centos 安装samba 编辑：程序博客网时间：2024/06/03 06:55

我们使用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键可取消选中。

其他模块后续说明。

阅读全文

1 0