构建网络图 (JavaScript)

news2024/11/19 8:48:13

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

网络图是数据可视化中实用而有效的工具，特别适用于说明复杂系统内的关系和连接。这些图表有助于理解各种背景下的结构，从社交网络到企业层级。在本教程中，我们将深入研究使用 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 容器 ID
            chart.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 容器 ID
            chart.container("container");
            // 启动图表的渲染
            chart.draw();
        });
    </script>
</body>

</html>

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

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

相关文章

排序算法系列二：归并排序、快速排序

排序算法系列二：归并排序、快速排序

零、说在前面 本文是一个系列&#xff0c; 入口请移步这里 一、理论部分 1.4&#xff1a;归并排序 1.4.1&#xff1a;算法解读&#xff1a; 使用二分法和插入排序两种算法的思想来实现。流程分为“拆分”、“合并”两大部分&#xff0c;前者就是普通的二分思想&#xff0c;将…
阅读更多...
文生视频模型Sora刷屏的背后的数据支持

文生视频模型Sora刷屏的背后的数据支持

前言&#xff1a;近日&#xff0c;OpenAI的首个文生视频模型Sora横空出世&#xff0c;引发了一波Sora热潮。与其相关的概念股连续多日涨停&#xff0c;多家媒体持续跟踪报道&#xff0c;央视也针对Sora进行了报道&#xff0c;称这是第一个真正意义上的视频生成大模型。 01 …
阅读更多...
VisualRules组件功能介绍-计算表格(一)

VisualRules组件功能介绍-计算表格(一)

一、本章内容 2、计算表格是什么 3、计算表格的比较优势 4、计算表格基本功能展示 5、计算表格基本操作 6、特别说明 二、计算表格是什么 计算表格作为VisualRules规则引擎的核心组件&#xff0c;提供了一种在内存中高效处理数据的方法。通过将外部数据导入计算表格&#x…
阅读更多...
C++入门 list的模拟实现

C++入门 list的模拟实现

目录 list的节点类 list的迭代器类 list的模拟实现 要模拟实现list&#xff0c;必须要熟悉list的底层结构以及其接口的含义&#xff0c;通过之前学习&#xff0c;这些内容已基本掌握&#xff0c;现在我们来模拟实现list。 参照带头双向循环链表的结构&#xff0c;我们可以建…
阅读更多...
DVWA 靶场 File Upload 通关解析

DVWA 靶场 File Upload 通关解析

前言 DVWA代表Damn Vulnerable Web Application&#xff0c;是一个用于学习和练习Web应用程序漏洞的开源漏洞应用程序。它被设计成一个易于安装和配置的漏洞应用程序&#xff0c;旨在帮助安全专业人员和爱好者了解和熟悉不同类型的Web应用程序漏洞。 DVWA提供了一系列的漏洞场…
阅读更多...
1.x86游戏实战-认识CE

1.x86游戏实战-认识CE

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 链接&#xff1a;https://pan.baidu.com/s/1rEEJnt85npn7N38Ai0_F2Q?pwd6tw3 提取码&#xff1a;6tw3 复…
阅读更多...
ARCGIS添加在线地图

ARCGIS添加在线地图

地图服务地址&#xff1a;http://map.geoq.cn/ArcGIS/rest/services 具体方法&#xff1a; 结果展示&#xff1a;
阅读更多...
vue2 + dataV 组件问题

vue2 + dataV 组件问题

在使用 dataV 过程中&#xff0c;遇见 svg 动画不加载问题。 一、理想状态下&#xff1a; 二、开发中遇到的 加载不出来问题。 解决方案 在查找官方资料中&#xff0c;提到使用 key 可以解决方案。 1 绑定 key 2 改变 key 值 注意&#xff1a;一定要在 $nextTick 里面执…
阅读更多...
PLC梯形图（置位与复位）的使用方法

PLC梯形图（置位与复位）的使用方法

置位指令相当于我们把照明灯的开关按到开的状态&#xff0c;即便我们把手离开&#xff0c;开关也是通的&#xff0c;灯也是亮的。 想要关闭必须要把它按到关的状态&#xff0c;即使用复位指令。 复位指令相当于我们把照明灯的开关按到关的状态&#xff0c;把手离开&#xff0…
阅读更多...
49-3 内网渗透 - MSI安 装策略提权

49-3 内网渗透 - MSI安 装策略提权

靶场环境搭建： 这里还是用我们之前的windows2012虚拟机进行搭建 1）打开一些设置让靶场存在漏洞 打开组策略编辑器（gpedit.msc） 使用运行命令打开： 按下 Win + R 组合键来打开运行对话框。输入 gpedit.msc，然后按下 Enter 键。使用搜索打开： 点击任务栏上的搜索框（W…
阅读更多...
Redis数据库（六）：主从复制和缓存穿透及雪崩

Redis数据库（六）：主从复制和缓存穿透及雪崩

目录 一、Redis主从复制 1.1 概念 1.2 主从复制的作用 1.3 实现一主二从 1.4 哨兵模式 1.4.1 哨兵的作用 1.4.2 哨兵模式的优缺点 二、Redis缓存穿透和雪崩 2.1 缓存穿透——查不到 2.1.1 缓存穿透解决办法 2.2 缓存击穿 - 量太大&#xff0c;缓存过期 2.2.1 缓存…
阅读更多...
排序算法之java语言实现

排序算法之java语言实现

零、说在前面 近期打算复习java的几种排序算法&#xff0c;我会将这些排序算法的实现代码、个人心得、时间复杂度分析&#xff0c;算法间的对比做成一个系列帖子&#xff0c;这里作为那些帖子的汇总而存在。 这个系列的框架会包含&#xff1a;概念、实现、时间空间复杂度…
阅读更多...
鸿萌数据迁移业务案例：为医药客户成功迁移重要科研数据

鸿萌数据迁移业务案例：为医药客户成功迁移重要科研数据

天津鸿萌科贸发展有限公司对 Windows 及 Linux 系统下的各类型备份及数据迁移业务积累了丰富的业务经验&#xff0c;可提供针对性的解决方案。 医药科研数据迁移成功案例 2024年6月初&#xff0c;天津某医药厂家埃尔法 workstation2020 服务器硬盘老化&#xff0c;为保证服务…
阅读更多...
记录一次即将出现的钓鱼新方式

记录一次即将出现的钓鱼新方式

钓鱼通常是内网渗透过程中的最为常见的入口方式&#xff0c;但是随着蓝队人员溯源反制思路开阔&#xff0c;入侵排查能力提升&#xff0c;钓鱼也越来越困难&#xff0c;这里就记一种不同寻常的钓鱼方式。 pip install 的执行流程&#xff1a; 先获取到远端的服务器地址 url 比…
阅读更多...
嵌入式Linux系统编程 — 3.7 文件目录与处理

嵌入式Linux系统编程 — 3.7 文件目录与处理

目录 1 文件目录 1.1 文件目录简介 1.2 目录存储形式 2 创建和删除目录 2.1 mkdir创建目录 2.2 rmdir删除空目录 3 opendir打开、 readdir读取以及closedir关闭目录 3.1 打开文件 opendir 3.2 读取目录 readdir 3.3 重置目录起点rewinddir 3.4 关闭目录 closedir 3…
阅读更多...
《数字图像处理》实验报告五

《数字图像处理》实验报告五

一、实验任务与要求 实现一个自适应局部降噪滤波器&#xff1b;在一幅测试版图像中加入运动模糊和高斯噪声&#xff0c;产生一幅退化图像&#xff0c;采用 deconvwnr 函数实现逆滤波及维纳滤波。 二、实验报告 &#xff08;一&#xff09;实现一个自适应局部降噪滤波器 1、自…
阅读更多...
入门JavaWeb之 JSP 语法、指令、内置对象和 JSTL 标签

入门JavaWeb之 JSP 语法、指令、内置对象和 JSTL 标签

导入 jar 包 搜索 jstl-api、standard pom.xml 导入 jar 包 <!-- Servlet 依赖 --><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>4.0.1</version><scope>provid…
阅读更多...
VMamba: Visual State Space Model论文笔记

VMamba: Visual State Space Model论文笔记

文章目录 VMamba: Visual State Space Model摘要引言相关工作Preliminaries方法网络结构2D-Selective-Scan for Vision Data(SS2D) VMamba: Visual State Space Model 论文地址: https://arxiv.org/abs/2401.10166 代码地址: https://github.com/MzeroMiko/VMamba 摘要 卷积神…
阅读更多...
使用matlab的大坑，复数向量转置！！！！！变量区“转置变量“功能（共轭转置）、矩阵转置（默认也是共轭转置）、点转置

使用matlab的大坑，复数向量转置！！！！！变量区“转置变量“功能（共轭转置）、矩阵转置（默认也是共轭转置）、点转置

近期用verilog去做FFT相关的项目&#xff0c;需要用到matlab进行仿真然后和verilog出来的结果来做对比&#xff0c;然后计算误差。近期使用matlab犯了一个错误&#xff0c;极大的拖慢了项目进展&#xff0c;给我人都整emo了&#xff0c;因为怎么做仿真结果都不对&#xff0c;还…
阅读更多...
matlab量子纠缠态以及量子门操作下的量子态

matlab量子纠缠态以及量子门操作下的量子态

前言 今天我们来聊聊题外话&#xff0c;量子纠缠&#xff0c;在目前物理分支中&#xff0c;要说最深&#xff0c;最能改变人类对宇宙影响的莫过于量子力学了&#xff0c;假如我们可以人为的对两个粒子施加纠缠态&#xff0c;那么我们将可以足不出户的完成对外界的操控 简介 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023