vis-network
显示动态的、自动组织的、可定制的网络视图。
网络是一种可视化,用于显示由节点和边组成的网络和网络。可视化易于使用,并支持自定义形状、样式、颜色、大小、图像等。网络可视化可在任何现代浏览器上流畅运行,最多可容纳数千个节点和边。为了处理大量节点,Network 支持集群。网络使用 HTML 画布进行渲染。
通过 npm 安装:
$ npm install vis-network
加载网络的基本示例如下所示。更多示例可以在项目的示例目录 中找到。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Network</title>
<script
type="text/javascript"
src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"
></script>
<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>
要从源代码构建库,请从 github 克隆项目
$ git clone git://github.com/visjs/vis-network.git
源码使用 node 的模块风格(require 和 module.exports)来组织依赖。要安装所有依赖项并构建库,npm install
请在项目的根目录中运行。
$ cd vis-network
$ npm install
然后,项目可以构建运行:
$ npm run build
要测试该库,请安装一次项目依赖项:
$ npm install
然后运行测试:
$ npm run test
非常欢迎对 vis.js 库的贡献!我们不能独自做到这一点!
感谢我们所有的支持者!🙏
通过成为赞助商来支持这个项目。您的徽标将显示在此处,并带有指向您网站的链接。
版权所有 (C) 2010-2018 Almende BV 和贡献者 版权所有 (c) 2018-2021 Vis.js 贡献者
Vis.js 是双重许可的
和
Vis.js 可以在任一许可下分发。