构建网络图 (JavaScript)

前序：在工作中难免有一些千奇百怪的需求，如果你遇到构建网络图，或者学习应对未来，请看这边文章，本文以代码为主。

网络图是数据可视化中实用而有效的工具，特别适用于说明复杂系统内的关系和连接。这些图表有助于理解各种背景下的结构，从社交网络到企业层级。在本教程中，我们将深入研究使用 JavaScript 创建引人注目的交互式网络图的快速方法。

我们将以大众汽车集团为例，绘制其子公司和产品线，以展示网络图如何使复杂的组织结构变得易于理解和访问。在本分步指南结束时，您将清楚地了解如何快速构建和自定义基于 JS 的网络图。系好安全带，是时候上路了！

一、需要调用两个js文件：

https://cdn.anychart.com/releases/8.12.1/js/anychart-graph.min.js

https://cdn.anychart.com/releases/8.12.1/js/anychart-core.min.js

二、创建数据

效果图如下：

代码：

<html><head><title>网络图（JavaScript）</title><style type="text/css">html,body,#container {width: 100%;height: 100%;margin: 0;padding: 0;}</style><script src="https://cdn.anychart.com/releases/8.12.1/js/anychart-core.min.js"></script><script src="https://cdn.anychart.com/releases/8.12.1/js/anychart-graph.min.js"></script>
</head><body><div id="container"></div><script>anychart.onDocumentReady(function () {// 创建数据const data = {"nodes": [// parent company{ "id": "Volkswagen Group", "group": "CoreCompany" },// child companies{ "id": "Audi", "group": "ChildCompany" },{ "id": "CUPRA", "group": "ChildCompany" },{ "id": "Ducati", "group": "ChildCompany" },{ "id": "Lamborghini", "group": "ChildCompany" },{ "id": "MAN", "group": "ChildCompany" },{ "id": "Porsche", "group": "ChildCompany" },{ "id": "Scania", "group": "ChildCompany" },{ "id": "SEAT", "group": "ChildCompany" },{ "id": "Škoda", "group": "ChildCompany" },{ "id": "Volkswagen", "group": "ChildCompany" },// products{ "id": "Audi Cars", "group": "Product" },{ "id": "Audi SUVs", "group": "Product" },{ "id": "Audi Electric Vehicles", "group": "Product" },{ "id": "CUPRA Performance Cars", "group": "Product" },{ "id": "CUPRA SUVs", "group": "Product" },{ "id": "Ducati Motorcycles", "group": "Product" },{ "id": "Lamborghini Sports Cars", "group": "Product" },{ "id": "Lamborghini SUVs", "group": "Product" },{ "id": "MAN Trucks", "group": "Product" },{ "id": "MAN Buses", "group": "Product" },{ "id": "Porsche Sports Cars", "group": "Product" },{ "id": "Porsche SUVs", "group": "Product" },{ "id": "Porsche Sedans", "group": "Product" },{ "id": "Scania Trucks", "group": "Product" },{ "id": "Scania Buses", "group": "Product" },{ "id": "SEAT Cars", "group": "Product" },{ "id": "SEAT SUVs", "group": "Product" },{ "id": "SEAT Electric Vehicles", "group": "Product" },{ "id": "Škoda Cars", "group": "Product" },{ "id": "Škoda SUVs", "group": "Product" },{ "id": "Škoda Electric Vehicles", "group": "Product" },{ "id": "Volkswagen Cars", "group": "Product" },{ "id": "Volkswagen SUVs", "group": "Product" },{ "id": "Volkswagen Vans", "group": "Product" },{ "id": "Volkswagen Trucks", "group": "Product" }],"edges": [// parent to child companies{ "from": "Volkswagen Group", "to": "Audi" },{ "from": "Volkswagen Group", "to": "CUPRA" },{ "from": "Volkswagen Group", "to": "Ducati" },{ "from": "Volkswagen Group", "to": "Lamborghini" },{ "from": "Volkswagen Group", "to": "MAN" },{ "from": "Volkswagen Group", "to": "Porsche" },{ "from": "Volkswagen Group", "to": "Scania" },{ "from": "Volkswagen Group", "to": "SEAT" },{ "from": "Volkswagen Group", "to": "Škoda" },{ "from": "Volkswagen Group", "to": "Volkswagen" },// child companies to products{ "from": "Audi", "to": "Audi Cars" },{ "from": "Audi", "to": "Audi SUVs" },{ "from": "Audi", "to": "Audi Electric Vehicles" },{ "from": "CUPRA", "to": "CUPRA Performance Cars" },{ "from": "CUPRA", "to": "CUPRA SUVs" },{ "from": "Ducati", "to": "Ducati Motorcycles" },{ "from": "Lamborghini", "to": "Lamborghini Sports Cars" },{ "from": "Lamborghini", "to": "Lamborghini SUVs" },{ "from": "MAN", "to": "MAN Trucks" },{ "from": "MAN", "to": "MAN Buses" },{ "from": "Porsche", "to": "Porsche Sports Cars" },{ "from": "Porsche", "to": "Porsche SUVs" },{ "from": "Porsche", "to": "Porsche Sedans" },{ "from": "Scania", "to": "Scania Trucks" },{ "from": "Scania", "to": "Scania Buses" },{ "from": "SEAT", "to": "SEAT Cars" },{ "from": "SEAT", "to": "SEAT SUVs" },{ "from": "SEAT", "to": "SEAT Electric Vehicles" },{ "from": "Škoda", "to": "Škoda Cars" },{ "from": "Škoda", "to": "Škoda SUVs" },{ "from": "Škoda", "to": "Škoda Electric Vehicles" },{ "from": "Volkswagen", "to": "Volkswagen Cars" },{ "from": "Volkswagen", "to": "Volkswagen SUVs" },{ "from": "Volkswagen", "to": "Volkswagen Vans" },{ "from": "Volkswagen", "to": "Volkswagen Trucks" }]};// 使用提供的数据结构初始化网络图const chart = anychart.graph(data);// 指定将呈现图表的 HTML 容器 IDchart.container("container");// 启动图表的渲染chart.draw();});</script>
</body></html>

三、设置配置

1、显示节点标签

了解每个节点代表什么对于网络图至关重要。默认情况下，节点标签可能不会显示，但我们可以轻松启用它们以使我们的图表更具信息性。

chart.nodes().labels().enabled(true);

2、配置悬浮提示信息

为了增强用户交互、提示可以提供额外的信息

chart.edges().tooltip().format("{%from} owns {%to}");

3、自定义节点外观

视觉区分有助于快速识别节点类型。我们可以根据节点的组分类自定义节点的外观，例如区分核心公司、子公司和产品。

// 1) 配置代表核心公司的节点的设置CoreCompany
chart.group('CoreCompany').stroke('none').height(45).fill('red').labels().fontSize(15);
// 2) 配置代表子公司的节点的设置 ChildCompany
chart.group('ChildCompany').stroke('none').height(25).labels().fontSize(12);
// 3) 配置代表产品的节点的设置 Product
chart.group('Product').shape('square').stroke('black', 1).height(15).labels().enabled(false);

4、配置标题

chart.title("大众汽车集团网络");

四、源码

<html><head><title>网络图（JavaScript）</title><style type="text/css">html,body,#container {width: 100%;height: 100%;margin: 0;padding: 0;}</style><script src="https://cdn.anychart.com/releases/8.12.1/js/anychart-core.min.js"></script><script src="https://cdn.anychart.com/releases/8.12.1/js/anychart-graph.min.js"></script>
</head><body><div id="container"></div><script>anychart.onDocumentReady(function () {// 创建数据const data = {"nodes": [// parent company{ "id": "Volkswagen Group", "group": "CoreCompany" },// child companies{ "id": "Audi", "group": "ChildCompany" },{ "id": "CUPRA", "group": "ChildCompany" },{ "id": "Ducati", "group": "ChildCompany" },{ "id": "Lamborghini", "group": "ChildCompany" },{ "id": "MAN", "group": "ChildCompany" },{ "id": "Porsche", "group": "ChildCompany" },{ "id": "Scania", "group": "ChildCompany" },{ "id": "SEAT", "group": "ChildCompany" },{ "id": "Škoda", "group": "ChildCompany" },{ "id": "Volkswagen", "group": "ChildCompany" },// products{ "id": "Audi Cars", "group": "Product" },{ "id": "Audi SUVs", "group": "Product" },{ "id": "Audi Electric Vehicles", "group": "Product" },{ "id": "CUPRA Performance Cars", "group": "Product" },{ "id": "CUPRA SUVs", "group": "Product" },{ "id": "Ducati Motorcycles", "group": "Product" },{ "id": "Lamborghini Sports Cars", "group": "Product" },{ "id": "Lamborghini SUVs", "group": "Product" },{ "id": "MAN Trucks", "group": "Product" },{ "id": "MAN Buses", "group": "Product" },{ "id": "Porsche Sports Cars", "group": "Product" },{ "id": "Porsche SUVs", "group": "Product" },{ "id": "Porsche Sedans", "group": "Product" },{ "id": "Scania Trucks", "group": "Product" },{ "id": "Scania Buses", "group": "Product" },{ "id": "SEAT Cars", "group": "Product" },{ "id": "SEAT SUVs", "group": "Product" },{ "id": "SEAT Electric Vehicles", "group": "Product" },{ "id": "Škoda Cars", "group": "Product" },{ "id": "Škoda SUVs", "group": "Product" },{ "id": "Škoda Electric Vehicles", "group": "Product" },{ "id": "Volkswagen Cars", "group": "Product" },{ "id": "Volkswagen SUVs", "group": "Product" },{ "id": "Volkswagen Vans", "group": "Product" },{ "id": "Volkswagen Trucks", "group": "Product" }],"edges": [// parent to child companies{ "from": "Volkswagen Group", "to": "Audi" },{ "from": "Volkswagen Group", "to": "CUPRA" },{ "from": "Volkswagen Group", "to": "Ducati" },{ "from": "Volkswagen Group", "to": "Lamborghini" },{ "from": "Volkswagen Group", "to": "MAN" },{ "from": "Volkswagen Group", "to": "Porsche" },{ "from": "Volkswagen Group", "to": "Scania" },{ "from": "Volkswagen Group", "to": "SEAT" },{ "from": "Volkswagen Group", "to": "Škoda" },{ "from": "Volkswagen Group", "to": "Volkswagen" },// child companies to products{ "from": "Audi", "to": "Audi Cars" },{ "from": "Audi", "to": "Audi SUVs" },{ "from": "Audi", "to": "Audi Electric Vehicles" },{ "from": "CUPRA", "to": "CUPRA Performance Cars" },{ "from": "CUPRA", "to": "CUPRA SUVs" },{ "from": "Ducati", "to": "Ducati Motorcycles" },{ "from": "Lamborghini", "to": "Lamborghini Sports Cars" },{ "from": "Lamborghini", "to": "Lamborghini SUVs" },{ "from": "MAN", "to": "MAN Trucks" },{ "from": "MAN", "to": "MAN Buses" },{ "from": "Porsche", "to": "Porsche Sports Cars" },{ "from": "Porsche", "to": "Porsche SUVs" },{ "from": "Porsche", "to": "Porsche Sedans" },{ "from": "Scania", "to": "Scania Trucks" },{ "from": "Scania", "to": "Scania Buses" },{ "from": "SEAT", "to": "SEAT Cars" },{ "from": "SEAT", "to": "SEAT SUVs" },{ "from": "SEAT", "to": "SEAT Electric Vehicles" },{ "from": "Škoda", "to": "Škoda Cars" },{ "from": "Škoda", "to": "Škoda SUVs" },{ "from": "Škoda", "to": "Škoda Electric Vehicles" },{ "from": "Volkswagen", "to": "Volkswagen Cars" },{ "from": "Volkswagen", "to": "Volkswagen SUVs" },{ "from": "Volkswagen", "to": "Volkswagen Vans" },{ "from": "Volkswagen", "to": "Volkswagen Trucks" }]};//使用提供的数据结构初始化网络图const chart = anychart.graph(data);// 自定义步骤 #1:// 显示图表节点标签chart.nodes().labels().enabled(true);// 自定义步骤 #2:// 配置边缘工具提示chart.edges().tooltip().format("{%from} owns {%to}");// 自定义步骤 #3:// 自定义节点外观:// 1) 配置代表核心公司的节点的设置chart.group('CoreCompany').stroke('none').height(45).fill('red').labels().fontSize(15);// 2）配置代表子公司的节点的设置chart.group('ChildCompany').stroke('none').height(25).labels().fontSize(12);// 3）配置代表产品的节点的设置chart.group('Product').shape('square').stroke('black', 1).height(15).labels().enabled(false);// 自定义步骤 #4:// 设置图表的标题以供参考chart.title("Volkswagen Group Network");// 指定将呈现图表的 HTML 容器 IDchart.container("container");// 启动图表的渲染chart.draw();});</script>
</body></html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/34944.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

kaoYan-Composition

kaoYan-Composition

It is almost axiomatic&#xff08;不证自明的、公理的&#xff09; that cooperation can benefit us in many ways.First, cooperation can facilitate the communication between different people.Likewise, collaboration can offer us an opportunity to learn from eac…
阅读更多...
mybatisplus的lambdaQuery()使用案例

mybatisplus的lambdaQuery()使用案例

一、常用 查询 // 方式一 条件是LearningLesson必须为LearningLessonServiceImpl的T LearningLesson lesson lambdaQuery().eq(LearningLesson::getUserId, userId).eq(LearningLesson::getStatus, LessonStatus.LEARNING.getValue()).orderByDesc(LearningLesson::getLates…
阅读更多...
【十六】【QT开发应用】Menu菜单,contextMenuEvent,setContextMenuPolicy,addAction

【十六】【QT开发应用】Menu菜单,contextMenuEvent,setContextMenuPolicy,addAction

在 Qt 框架中&#xff0c;QMenu 类用于创建和管理菜单。菜单是用户界面的一部分&#xff0c;可以包含多个选项或动作&#xff0c;用户可以选择这些选项来执行特定的功能。菜单通常显示在菜单栏、上下文菜单&#xff08;右键菜单&#xff09;或工具栏中。 基本用法 创建菜单对象…
阅读更多...
深入解读一下 `com.google.android.material.appbar.CollapsingToolbarLayout`

深入解读一下 `com.google.android.material.appbar.CollapsingToolbarLayout`

简介 在现代 Android 应用中&#xff0c;提供流畅且美观的用户体验是非常重要的。CollapsingToolbarLayout 是 AndroidX库中 Material Components 的一部分&#xff0c;它提供了一种易于实现的可折叠工具栏效果&#xff0c;常用于提供视觉吸引力的标题栏和动画效果。 本文将详…
阅读更多...
已解决Writing ‘modem_a‘FAILED (remote: ‘Operation not permitted‘

已解决Writing ‘modem_a‘FAILED (remote: ‘Operation not permitted‘

今天用可视化工具FastbootEnhance线刷&#xff0c;没有注意到日志报错&#xff0c;开机后黑屏&#xff0c;电脑能检测到是开机状态&#xff0c;电源键按下有声音。 排除线刷包问题&#xff0c;翻看FastbootEnhance的日志&#xff0c;它的日志放到记事本全屏方便观看&#xff0…
阅读更多...
项目1111

项目1111

中文显示姓名列和手机号 SELECT contact_name AS 姓名, contact_phone AS 手机号 FROM 2_公司id; 使用explain测试给出的查询语句&#xff0c;显示走了索引查询 EXPLAIN SELECT * FROM 7_订单数量 WHERE countid LIKE e%; 统计用户订单信息&#xff0c;查询所有用户的下单数量…
阅读更多...
Prometheus中添加基本身份验证功能

Prometheus中添加基本身份验证功能

在Prometheus中添加基本身份验证功能&#xff0c;可以按照以下步骤进行&#xff1a; 一、生成哈希密码 首先&#xff0c;需要安装bcrypt工具&#xff0c;用于生成哈希密码。这可以通过Python的bcrypt库来完成。如果未安装&#xff0c;可以使用pip进行安装。 创建一个Python脚…
阅读更多...
Android性能优化——卡顿优化

Android性能优化——卡顿优化

文章目录 一、从XML到屏幕上的展示造成跳帧的因素有那些发现问题定位问题定位代码 一、从XML到屏幕上的展示 数据加载阶段 数据控制阶段 数据展示阶段 xml —> view onCreat —> 解析layout.xml resume —> view —> wms ViewRootImpl UI 绘制流程 &#xff1a;测…
阅读更多...
计算机网络之数据通信原理

计算机网络之数据通信原理

1.通信系统的基本组成 信源&#xff1a;信息的发出者&#xff1b; 信宿&#xff1a;信息的接收者&#xff1b; 载体&#xff1a;信息的传送通道&#xff1b; 变换器&#xff1a;将信息变换成载体上可传输的信号&#xff1b; 反变换器&#xff1a;将载体上传输的信号变换成信…
阅读更多...
Java中网络安全的基础知识

Java中网络安全的基础知识

Java中网络安全的基础知识 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在现代互联网应用中&#xff0c;网络安全是一个至关重要的话题。随着网络攻击和数据…
阅读更多...
Java零基础-集合：TreeSet

Java零基础-集合：TreeSet

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。运营社区&#xff1a;C站/掘金/腾讯云&#xff1b;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一…
阅读更多...
SQL基础：掌握数据查询与操作的核心技能（四）

SQL基础：掌握数据查询与操作的核心技能（四）

引言&#xff1a;数据操作的语言艺术 在前一章节《数据库与表的基本操作》中&#xff0c;我们深入了解了如何创建、管理数据库和表&#xff0c;构建了数据存储的基础框架。本章节&#xff0c;我们将深入探索SQL语言&#xff0c;它是数据库管理系统的通用语言&#xff0c;用于数…
阅读更多...
SpringBoot集成Druid数据库连接池并配置可视化界面和监控慢SQL

SpringBoot集成Druid数据库连接池并配置可视化界面和监控慢SQL

pom.xml <!-- Druid 数据库连接池 --><dependency><groupId>com.alibaba</groupId><artifactId>druid-spring-boot-starter</artifactId><version>1.2.23</version></dependency>application.yml spring:jackson:date-…
阅读更多...
明星周边物品交易购物系统

明星周边物品交易购物系统

摘 要 随着明星文化的兴起和粉丝经济的蓬勃发展&#xff0c;明星周边产品的市场需求日益增长。明星周边物品包括各种与明星相关的商品&#xff0c;如T恤、海报、手办、签名照等&#xff0c;它们成为粉丝们表达对明星喜爱和支持的方式之一。通过“星光璀璨”来形象化地表达明星…
阅读更多...
Flask的 preprocess_request

Flask的 preprocess_request

理解 Flask 类似框架中的 preprocess_request 方法 在 Flask 类似的 web 框架中&#xff0c;preprocess_request 方法是一个关键组件。它在请求被分派之前调用&#xff0c;用于执行一些预处理操作。让我们一步一步来理解这个方法的工作原理。 1. 方法概述 首先&#xff0c;我…
阅读更多...
【Android面试八股文】说一说Handler的sendMessage和postDelay的区别？

【Android面试八股文】说一说Handler的sendMessage和postDelay的区别？

文章目录 一、`sendMessage` 方法1.1 主要用法1.2 适用场景二、`postDelayed` 方法2.1 主要用法2.2 适用场景三、 区别总结3.1 区别3.2 本质上有差别吗？四、实例对比4.1 使用`sendMessage`4.2 使用`postDelayed`五、结论Handler类在Android中用于消息传递和任务调度。 sendMe…
阅读更多...
基于Java技术的在线学习平台系统

基于Java技术的在线学习平台系统

开头语&#xff1a;你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;Java技术&#xff0c;基于SpringBoot框架 工具&#xff1a;Eclipse、Navicat、M…
阅读更多...
n次方差公式推导

n次方差公式推导

1. 推导 数列求和 S a 1 a 2 ⋯ a n , 公比为 q q S a 2 a 3 ⋯ a n 1 ( 1 − q ) S a 1 − a n 1 a 1 : 1 化简 ( 1 ) ( 3 ) S 1 q ⋯ q n − 1 ( 1 − q ) S 1 − q n ( 4 ) 代入 ( 5 ) ( 1 − q ) ( 1 q ⋯ q n − 1 ) 1 − q n q : b a 代入 ( 6 )…
阅读更多...
Qt 学习（一） addressbook

Qt 学习（一） addressbook

Qt Demo: addressbook (1)创建项目&#xff1a;选择不创建界面&#xff0c;即UI&#xff0c;此时会自动生成的文件如图所示&#xff1a; QApplication&#xff1a; MainWindow 继承自 QMainWindow&#xff0c;根据需要设计的界面样式。 (2)确定MainWindow 的成员变量 首先&…
阅读更多...
Jetpack架构组件_Navigaiton组件_1.Navigaiton切换Fragment

Jetpack架构组件_Navigaiton组件_1.Navigaiton切换Fragment

1.Navigation主要作用 方便管理Fragment &#xff08;1&#xff09;方便我们管理Fragment页面的切换 &#xff08;2&#xff09;可视化的页面导航图&#xff0c;便于理清页面间的关系。 &#xff08;3&#xff09;通过destination和action完成页面间的导航 &#xff08;4&a…
阅读更多...
最新文章

Copyright @ 2022~2023