vis-network

vis-network

JavaScript网络可视化库 创建交互式网络图

vis-network是用于创建交互式网络可视化的JavaScript库。支持自定义节点和边的样式,可流畅处理数千个元素。使用HTML canvas渲染,具备聚类功能,适用于各种现代浏览器。易于使用,是网络数据可视化的有力工具。

vis-network网络可视化节点和边HTML5 Canvas数据可视化Github开源项目

vis-network

示例图表

Network 是一个用于显示由节点和边组成的网络的可视化工具。该可视化工具易于使用,支持自定义形状、样式、颜色、大小、图像等。Network 可视化在任何现代浏览器上都能流畅运行,可处理多达数千个节点和边。为了处理更大量的节点,Network 还支持聚类。Network 使用 HTML canvas 进行渲染。

徽章

semantic-release Renovate npm

dependencies Status devDependencies Status peerDependencies Status

GitHub contributors Backers on Open Collective Sponsors on Open Collective

安装

通过 npm 安装:

$ npm install vis-network

示例

以下是加载 Network 的基本示例。更多示例可以在项目的 examples 目录 中找到。

<!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"> // 创建节点数组 var nodes = new vis.DataSet([ { id: 1, label: "节点 1" }, { id: 2, label: "节点 2" }, { id: 3, label: "节点 3" }, { id: 4, label: "节点 4" }, { id: 5, label: "节点 5" }, ]); // 创建边数组 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 }, ]); // 创建网络 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.js 的模块风格(require 和 module.exports)来组织依赖关系。要安装所有依赖项并构建库,请在项目根目录下运行 npm install

$ cd vis-network
$ npm install

然后,可以通过运行以下命令来构建项目:

$ npm run build

测试

要测试库,请先安装项目依赖项:

$ npm install

然后运行测试:

$ npm run test

贡献

我们非常欢迎对 vis.js 库的贡献!我们无法独自完成这项工作!

支持者

感谢所有支持者!🙏

<a href="https://opencollective.com/visjs#backers" target="_blank"><img src="https://yellow-cdn.veclightyear.com/835a84d5/bc4d4992-97ac-46c7-80a6-bc294ddf2f3d.svg?width=890"></a>

赞助商

通过成为赞助商来支持这个项目。您的徽标将显示在这里,并链接到您的网站。

<a href="https://opencollective.com/visjs/sponsor/0/website" target="_blank"><img src="https://yellow-cdn.veclightyear.com/835a84d5/156f3454-091b-4de6-abc1-0319db5f0165.svg"></a> <a href="https://opencollective.com/visjs/sponsor/1/website" target="_blank"><img src="https://yellow-cdn.veclightyear.com/835a84d5/3302cd13-36e9-40db-a21e-e57631403324.svg"></a> <a href="https://opencollective.com/visjs/sponsor/2/website" target="_blank"><img src="https://yellow-cdn.veclightyear.com/835a84d5/c96b82a9-5718-4e85-8761-51b2caef2440.svg"></a> <a href="https://opencollective.com/visjs/sponsor/3/website" target="_blank"><img src="https://yellow-cdn.veclightyear.com/835a84d5/44dfe632-1f5f-45aa-8802-d560df62ffda.svg"></a> <a href="https://opencollective.com/visjs/sponsor/4/website" target="_blank"><img src="https://yellow-cdn.veclightyear.com/835a84d5/8cf4aef3-7d6c-4be0-8f42-3f83e85daea3.svg"></a> <a href="https://opencollective.com/visjs/sponsor/5/website" target="_blank"><img src="https://yellow-cdn.veclightyear.com/835a84d5/15ec795c-136f-4712-b33d-4a92ae209992.svg"></a> <a href="https://opencollective.com/visjs/sponsor/6/website" target="_blank"><img src="https://yellow-cdn.veclightyear.com/835a84d5/97a5ca6c-752b-414c-92e9-5dde987c8778.svg"></a> <a href="https://opencollective.com/visjs/sponsor/7/website" target="_blank"><img src="https://yellow-cdn.veclightyear.com/835a84d5/7d418efc-d1bb-4ea6-8143-f0d9769317a5.svg"></a> <a href="https://opencollective.com/visjs/sponsor/8/website" target="_blank"><img src="https://yellow-cdn.veclightyear.com/835a84d5/eadba656-57d2-450d-8a41-2a7cde366a4c.svg"></a> <a href="https://opencollective.com/visjs/sponsor/9/website" target="_blank"><img src="https://yellow-cdn.veclightyear.com/835a84d5/5bf8b9d4-5f4d-409e-8490-1fc5b35c7150.svg"></a>

许可证

版权所有 (C) 2010-2018 Almende B.V. 和贡献者 版权所有 (c) 2018-2021 Vis.js 贡献者

Vis.js 采用双重许可:

Vis.js 可以在任一许可证下分发。

编辑推荐精选

音述AI

音述AI

全球首个AI音乐社区

音述AI是全球首个AI音乐社区,致力让每个人都能用音乐表达自我。音述AI提供零门槛AI创作工具,独创GETI法则帮助用户精准定义音乐风格,AI润色功能支持自动优化作品质感。音述AI支持交流讨论、二次创作与价值变现。针对中文用户的语言习惯与文化背景进行专门优化,支持国风融合、C-pop等本土音乐标签,让技术更好地承载人文表达。

QoderWork

QoderWork

阿里Qoder团队推出的桌面端AI智能体

QoderWork 是阿里推出的本地优先桌面 AI 智能体,适配 macOS14+/Windows10+,以自然语言交互实现文件管理、数据分析、AI 视觉生成、浏览器自动化等办公任务,自主拆解执行复杂工作流,数据本地运行零上传,技能市场可无限扩展,是高效的 Agentic 生产力办公助手。

lynote.ai

lynote.ai

一站式搞定所有学习需求

不再被海量信息淹没,开始真正理解知识。Lynote 可摘要 YouTube 视频、PDF、文章等内容。即时创建笔记,检测 AI 内容并下载资料,将您的学习效率提升 10 倍。

AniShort

AniShort

为AI短剧协作而生

专为AI短剧协作而生的AniShort正式发布,深度重构AI短剧全流程生产模式,整合创意策划、制作执行、实时协作、在线审片、资产复用等全链路功能,独创无限画布、双轨并行工业化工作流与Ani智能体助手,集成多款主流AI大模型,破解素材零散、版本混乱、沟通低效等行业痛点,助力3人团队效率提升800%,打造标准化、可追溯的AI短剧量产体系,是AI短剧团队协同创作、提升制作效率的核心工具。

seedancetwo2.0

seedancetwo2.0

能听懂你表达的视频模型

Seedance two是基于seedance2.0的中国大模型,支持图像、视频、音频、文本四种模态输入,表达方式更丰富,生成也更可控。

nano-banana纳米香蕉中文站

nano-banana纳米香蕉中文站

国内直接访问,限时3折

输入简单文字,生成想要的图片,纳米香蕉中文站基于 Google 模型的 AI 图片生成网站,支持文字生图、图生图。官网价格限时3折活动

扣子-AI办公

扣子-AI办公

职场AI,就用扣子

AI办公助手,复杂任务高效处理。办公效率低?扣子空间AI助手支持播客生成、PPT制作、网页开发及报告写作,覆盖科研、商业、舆情等领域的专家Agent 7x24小时响应,生活工作无缝切换,提升50%效率!

堆友

堆友

多风格AI绘画神器

堆友平台由阿里巴巴设计团队创建,作为一款AI驱动的设计工具,专为设计师提供一站式增长服务。功能覆盖海量3D素材、AI绘画、实时渲染以及专业抠图,显著提升设计品质和效率。平台不仅提供工具,还是一个促进创意交流和个人发展的空间,界面友好,适合所有级别的设计师和创意工作者。

图像生成AI工具AI反应堆AI工具箱AI绘画GOAI艺术字堆友相机AI图像热门
码上飞

码上飞

零代码AI应用开发平台

零代码AI应用开发平台,用户只需一句话简单描述需求,AI能自动生成小程序、APP或H5网页应用,无需编写代码。

Vora

Vora

免费创建高清无水印Sora视频

Vora是一个免费创建高清无水印Sora视频的AI工具

下拉加载更多