21种树状网络数据可视化Web前端库

置顶 已于 2022-09-08 20:42:41 修改
阅读量3.1k 收藏 21
点赞数 5
分类专栏： 大前端 实用工具 文章标签： 前端 网络 数据分析
于 2022-09-06 13:28:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huiskai/article/details/126667373
版权

本文主要是介绍基于Web应用的网络数据可视化方案，这类可视化方案众多，本文精选了一些相对典型的方案，供各位大佬参考。有些链接可能无法访问，请自备梯子。篇幅有限，欢迎补充。

目录

1. Echarts

https://echarts.apache.org
Echarts有好几种类型的图标可以用来丛网络数据的可视化，主要类型如下：

对于3D展示需求，Echarts也提供了相应的解决方案：

2. G6

https://g6.antv.vision
G6相较于Echarts也具有非常丰富的展示类型，和网络相关的主要包括一下几种：

3. L7

https://l7.antv.vision

4. L7Plot

https://l7plot.antv.vision

5. F6

https://f6.antv.vision
F6主要是针对移动端的可视化工具，和G6类似，但是考虑充分考虑了移动端对于GPU的不同需求。

6. AVA

https://ava.antv.vision

7. D3

https://observablehq.com/@d3/gallery
D3提供了非常底层的可视化API，给与开发者极大的自由度。这种高自由度的代价是，对于复杂图形的开发成本高。D3也作为很多可视化工具的基础库。

  • D3—类型7 (https://observablehq.com/@d3/voronoi-labels)
    泰森多边形又叫冯洛诺伊图（Voronoi diagram），得名于Georgy Voronoi，是一组由连接两邻点线段的垂直平分线组成的连续多边形。一个泰森多边形内的任一点到构成该多边形的控制点的距离小于到其他多边形控制点的距离。

8. Keylines

https://cambridge-intelligence.com/keylines

9. Vis.js

https://visjs.github.io/vis-network/examples

10. Sigma.js

https://www.sigmajs.org

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ermPDOwE-1662366655879)(https://codesandbox.io/s/github/jacomyal/sigma.js/tree/main/examples/load-gexf-file)]](https://img-blog.csdnimg.cn/d18b5d5fad7b4b6ebb722a2cde097746.png"/>

11. Ogma

https://doc.linkurio.us/ogma/latest)

12. Ngraph

https://github.com/anvaka/ngraph

13. React-force-graph

https://github.com/vasturiano/react-force-graph
是一个3D视图的力引导布局的库。

14. Cola.js

https://ialab.it.monash.edu/webcola/

15. Cytoscape.js

https://js.cytoscape.org/
这是一个用纯JS编写的图形库，带有针对核心Cytoscape.js库和所有第一方扩展的开放源代码许可(MIT)。它在生产中的商业项目和开源项目中使用，并且首先面向用户(面向前端应用程序用例和开发人员用例)设计。它包括从BFS到PageRank的图论算法。一个非常适合做知识图谱的前端可视化图库。

16. dagre-d3

https://github.com/dagrejs/dagre-d3

17. ElGrapho

https://www.elgrapho.com/

18. GoJS

https://gojs.net.cn

19. Jointjs

https://resources.jointjs.com/

20. JavaScript InfoVis Toolkit

http://philogb.github.io/jit/demos.html

21. jsPlumb

https://demo.jsplumbtoolkit.com

参考资料

  1. Echarts (https://echarts.apache.org)
  2. G6 (https://g6.antv.vision)
  3. L7 (https://l7.antv.vision)
  4. L7Plot (https://l7plot.antv.vision)
  5. F6 (https://f6.antv.vision)
  6. AVA (https://ava.antv.vision)
  7. D3
  8. Keylines
  9. Vis.js
  10. Sigma.js (https://www.sigmajs.org/)
  11. Ogma (https://doc.linkurio.us/ogma/latest/)
  12. Ngraph (https://github.com/anvaka/ngraph)
  13. React-force-graph (https://github.com/vasturiano/react-force-graph)
  14. A Comparison of Javascript Graph Network Visualisation Libraries
  15. Cola.js (https://ialab.it.monash.edu/webcola)
  16. Cytoscape.js (https://js.cytoscape.org/)
  17. dagre-d3 (https://github.com/dagrejs/dagre-d3)
  18. ElGrapho (https://www.elgrapho.com/)
  19. GoJS (https://gojs.net.cn)
  20. Jointjs (https://resources.jointjs.com)
  21. JavaScript InfoVis Toolkit (http://philogb.github.io/jit/demos.html)
  22. jsPlumb (https://demo.jsplumbtoolkit.com)
呵呵你真行
关注
  • 5
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
React+D3组件开发之treemap(树图)
Welcome to Fine's blog
10-11 3773
背景 在React前端项目中使用D3JS定制可视化组件，treemap支持节点的新建、删除、缩放、全屏等功能 技术实现 ###首先图表线和点的数据 // dataSource初始数据 const hierarchyData = d3.hierarchy(dataSource) // hierarchy layout and add node.x,node.y c...
js实现树形图
09-03
简单易用的js实现树形图，适于通用目录树。现成源码，直接使用。
用于绘制建立在 SigmaJS 之上的网络图的轻量级 React 库
06-08
它使在 Web 页面上发布网络变得容易，并允许开发人员将网络探索集成到丰富的 Web 应用程序中。 使用 JSX 进行图形配置，包括异步图形加载。 库是轻量级和模块化的，因此您可以只捆绑您使用的内容。 易于使用附加组件进行扩展。 目录 用法 组件参考 Sigma SigmaEnableWebGL 扩展 Sigma 组件 组件组合 类型 用法 有关工作示例，请参阅故事书。 如果你想 fork & change 或贡献，请确保阅读 CONTRIBUTION 先决条件部分。 安装 npm install --save react-sigma 或 yarn add react-sigma 或 bower install https://unpkg.com/[email protected]/dist/react-sigma.min.js 如果你不想使用 webpack 或browserify，你总是可以引用单个文件分布，库将在全局变量 ReactSigma 下可用： 请注意，图形节点需要定义 x、y 和大小才能显示，RelativeSize 和 RandomizeNodePositions 等
前端高性能渲染大型树形结构组件（附全部代码React、Vue）
自在极意斌的博客
12-06 5368
问题： 使用一般的tree组件渲染大量数据（如几千个树节点）的时候会非常卡顿，主要原因是页面中绘制的大量的Dom，滚动或展开、收起不断造成页面重绘、回流，使得性能不佳。 解决思路： Step1：将树形数据拍平成一般的List Step2：采用padding缩进的方式营造树形结构 Step3：在结合虚拟列表高效渲染长列表 虚拟列表大致原理：当列表data中有n个item项，我们只渲染可视区域（比如10条）的item，页面滚动时获取到scrollTop，scrollTop / itemHeig.
推荐使用：Tree.js - 操作和构建可扩展树状结构的JavaScript库
最新发布
gitblog_00099的博客
06-13 507
推荐使用：Tree.js - 操作和构建可扩展树状结构的JavaScript库 项目地址:https://gitcode.com/marmelab/tree.js 项目介绍 Tree.js 是一个轻量级的JavaScript库，专为构建和操作可扩展的树形数据结构而设计。这个库提供了一系列方便的方法，如查找节点、获取属性、添加和删除子节点等，使得在前端处理复杂的数据结构变得更加简单。 虽然这个项目已...
二叉树 html模板,用 DOM 与 CSS 展示二叉树
weixin_35750483的博客
06-11 479
好久不见，我的日常更新终于来了这次讨论一点简单的算法，当然，主要还是前端的内容~本文内容较长，主要涉及如下内容：二叉树及相关算法Flexbox 布局CSS 背景图片，计数器等应用使用 SVG 做为背景图片会遇到的问题最近在讲各种与树相关的算法与题目时，为了给学生演示，总是想要看到树的结构，总是画出来又慢又丑，在控制台里展开看的话实在太麻烦，而且不够直观我就寻思能不能把树给展示在页面里。什么是二叉树...
ECharts实现数据可视化入门教程（超详细）
热门推荐
『愚』的博客
02-20 18万+
ECharts实现数据可视化入门教程（超详细）ECharts介绍ECharts入门教程第一步：下载并引入scharts.js文件第二步：编写代码目录结构编写index.html代码效果展示ECharts的基础配置主要配置（常用的）案例讲解 ECharts介绍 官网链接：Apache ECharts ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢
多表连查数据显示 前端树形图
皮皮亮的博客
12-24 591
多表连查数据显示 一对一：association 一对多：collection 多对多：创建多对多的关系表 略 一对一： 本类增添：private Department department; <resultMap id="employeeWithSalary" extends="BaseResultMap" type="com.xxxx.server.pojo.Employee"> <association property="salary" javaType="com.xxxx
我的前端工具集(四)树状结构前篇
anyu0190的博客
10-16 589
我的前端工具集(四)树状结构前篇 liuyuhang原创，未经允许禁止转载 目录 我的前端工具集 1、什么是树状结构 　　树状结构，指的是由根，和叶组成的结构。 　　我们一般看的文件夹关系，就是树状结构。打开一个文件夹，其中可以有多个文件夹。 　　树状结构的路径能够向下扩展，同时能够向上溯源。 　　在树状结构分叉的地方，叫做节点（node）。...
前端根据json数据，递归解析数据，生成树形组织图
jia14的博客
07-08 2852
使用ajax获取json文件的内容，递归解析json数据，使用前端自带的框架生成组织结构图 效果图 展示效果：
前端：vue实现树状结构图
zuokaopuqingnian的博客
06-01 1141
使用vue-org-tree实现此种效果。
案例分析涉及概念
Asunqingwen的博客
04-19 718
一、项目管理 1.关键路径 关键路径是项目中的最长路径，是整个项目成败关键，不能延误； 一个PERT图可以有多条关键路径； 关键路径越多，说明项目活动并行度越高，因为有大量任务不容延误，项目管理的复杂度也变高，从而风险变大； 2.PERT图 PERT（项目评估与评审技术）图是一种图形化的网络模型，描述一个项目中任务和任务之间的关系，每个节点表示一个任务，通常包括任务编号、名称、开始和结束时间、持续时间和松弛时间。主要描述不同任务之间的依赖关系。 3.Gantt图 Gantt图是一种简单的水平条形图
[知识图谱实战篇] 七.HTML+D3实现关系图谱搜索功能（源码）
02-15
本文主要增加了一个搜索功能，通过该搜索框能展示搜索节点的相关内容，同时在张老师的基础上增加搜索节点相关联的边及节点。前面作者讲解了很多知识图谱原理知识，包括知识图谱相关技术、Neo4j绘制关系图谱等，但仍缺少一个系统全面的实例。为了加深自己对知识图谱构建的认识，为后续创建贵州旅游知识图谱打下基础，作者深入学习了张宏伦老师的网易云课程（星球系列电影），并结合自己的理解和技术分享了该系列专栏，从数据采集、数据展示、数据分析到知识图谱构建，文章后续还会讲解中文数据的实体识别、关系抽取、知识计算等。 --------------------- 作者：Eastmount 来源：CSDN 原文：https://blog.csdn.net/Eastmount/article/details/87270150 版权声明：本文为博主原创文章，转载请附上博文链接！
json-viewer:Web组件以树状视图可视化JSON数据
05-06
一个Web组件，以树状视图可视化JSON数据 安装 npm i @alenaksu/json-viewer 然后将包导入到您的项目中。 import '@alenaksu/json-viewer' ; 用法 < json> 属性 data - JSON对象的字符串表示来负载 特性 data -...
基于ECharts智慧运维数据可视化大屏源码
12-03
ECharts是一款由百度开源的、基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，同时支持地图、热力图等多种复杂图表，适用于Web端的数据展示。在智慧运维场景中，ECharts...
treemap-chart：树形图交互式图表Web组件，用于可视化分层数据
02-05
树状图 交互式树图图表，用于可视化分层数据中的比例，其中树的节点表示为嵌套的完全堆积的矩形图块。 支持通过鼠标滚轮事件或单击节点（将视口聚焦在关联的子树上）的缩放交互。 该图表还通过将每个节点的尺寸动画...
前端必备的谷歌浏览器JSON可视化插件：JSON-Handle
05-27
3. **树形视图**：以树形图的方式展示JSON数据，每个键值对都以节点的形式呈现，可以方便地展开和收缩，这样可以一目了然地查看复杂的JSON对象结构。 4. **性能优化**：考虑到JSON数据可能很大，JSON-Handle优化了...
【antd + vue】a-table 树形数据展示 - 嵌套子表格
m0_65041204的博客
03-09 2476
Ant Design Vue 组件 a-table 嵌套表格时，父表格展开后，子表格的数据渲染了2次
大前端开发中的“树”
Jack, what else can you do besides holding your little darling?
10-28 2738
本文介绍 Web、Android、iOS、Flutter 这些前终端平台下，与 “树” 及视图系统有关的技术话题，并尝试分析它们之间的异同点；方便从事大前端开发的同学对各平台的技术特性有更广泛的了解。 一、前言 从早期 Web 开发中的 DOM 树，再到现在 Flutter 开发中的 “三棵树”，以及 Android 和 iOS 开发中相似的概念，它们有联系又有区别。围绕 “树”，各个平台有一些共同的技术话题，例如采用合并操作完成性能优化等。在大前端的背景下，弄清楚这些技术点对研发工作非常有必要..
数据可视化课程设计模板
05-28
好的，以下是一个可能的数据可视化课程设计模板： 1. 课程概述 - 课程介绍：介绍课程目标、内容、教学方法和评估方式等。 - 数据可视化概述：介绍数据可视化的定义、作用、分类以及常用的图表类型等。 2. 数据可视化的基本技能 - 数据准备：介绍如何进行数据清洗和预处理，以及如何从数据中提取有用的信息。 - 数据可视化工具使用：介绍如何使用数据可视化工具进行数据分析和可视化，比如Excel、Tableau、Python等工具的使用。 - 数据可视化原则：介绍数据可视化的基本原则，如数据精确性、清晰性、简洁性等。 3. 数据可视化的高级技能 - 高级图表类型：介绍更复杂的图表类型，如热力图、流程图、树状图等。 - 交互式可视化：介绍如何创建交互式可视化，使用户能够与数据进行互动。 - 数据挖掘和机器学习：介绍如何使用数据挖掘和机器学习技术进行数据分析和可视化。 4. 数据可视化的应用 - 商业分析：介绍如何使用数据可视化进行商业分析，如销售分析、市场调研等。 - 数据科学：介绍如何使用数据可视化进行数据科学研究，如数据挖掘、数据可视化等。 - 其他应用场景：介绍其他领域的数据可视化应用，如医疗、政策研究等。 5. 课程总结和展望 - 课程总结：总结课程的内容和收获，回顾学习过程和成果。 - 展望未来：展望数据可视化的发展趋势，如人工智能、虚拟现实等，以及如何进一步提升数据可视化的应用水平。 希望这个模板能够给你提供一些参考和启示！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

呵呵你真行

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值