visjs入门1

最新推荐文章于 2024-08-08 08:02:22 发布

_尊哥

最新推荐文章于 2024-08-08 08:02:22 发布

阅读量6.8k

点赞数

分类专栏： JavaScript 文章标签： visjs

本文链接：https://blog.csdn.net/cuishizun/article/details/80399358

版权

本文介绍了vis.js库，特别是其Network组件，用于创建动态数据的网络可视化。内容包括Network的创建、模块、参数和自定义，适用于大量数据的交互式展示。同时，提供了自定义区域设置的方法和Network的API方法概述。

摘要由CSDN通过智能技术生成

1、简述

这里面有些是根据自己的理解解释的，有些还没有用到的暂时就只取了百度的翻译，文档也不是全的，以后再补充，请结合自己的理解使用。
vis.js 基于浏览器的动态可视化库。该库被设计为易于使用，处理大量的动态数据，并支持对数据的操作和交互。该库由组件DataSet，Timeline，Network，Graph2d和Graph3d组成。

2、Network

network实例请参考官网：http://visjs.org/network_examples.html。
network是一种可视化的网络和网络组成的nodes节点和edges边缘。可视化易于使用，并支持自定义形状、样式、颜色、大小、图像等。网络可视化工作在任何现代浏览器上都能达到几千个节点和边缘。为了处理更大数量的节点，网络具有集群支持。网络使用HTML画布进行渲染。

3、Network创建

创建一个Network类型的vis是很容易的。要求您包括vis.js和css文件，这些文件可以在这里得到。如果将这些添加到应用程序中，则需要指定节点和边缘。如果你愿意，你可以使用Gephi的点语言或导出节点和边，但是现在我们将不用这些。有关此信息的更多信息，请单击下面的标签。您还可以使用vis.DataSets进行动态数据绑定，例如，在初始化网络之后更改颜色、标签或任何选项。

一旦你有了数据，你所需要的就是一个容器div来告诉你在哪里放置你的网络。此外，您可以使用选项对象自定义网络的许多方面。在代码中，这看起来像：

<html>
<head>
    <script type="text/javascript" src="../../dist/vis.js"></script>
    <link href="../../dist/vis.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 node