构建网络图 (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 容器 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>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

等保1.0与2.0：物理环境安全的演进之路

等保1.0与2.0：物理环境安全的演进之路

在信息安全的大厦中&#xff0c;物理环境安全是那坚实的基础&#xff0c;承载着整个信息系统的稳定与安全。随着时间的推移&#xff0c;我国的信息安全等级保护标准也在不断地进化与完善&#xff0c;从等保1.0到等保2.0&#xff0c;不仅仅是数字上的递增&#xff0c;更是对物理…
阅读更多...
【黑龙江哪些行业需要做等保？】

【黑龙江哪些行业需要做等保？】

黑龙江等保测评是衡量企业网络安全水平的一项主要指标&#xff0c;包括&#xff1a;金融&#xff0c;能源&#xff0c;电信&#xff0c;医疗&#xff0c;教育&#xff0c;交通&#xff0c;制造&#xff0c;电商等。 等保测评是黑龙江省信息化建设的重要组成部分&#xff0c;也…
阅读更多...
Qt篇——获取Windows系统上插入的串口设备的物理序号

Qt篇——获取Windows系统上插入的串口设备的物理序号

先右键【此电脑-管理- 设备管理器-端口&#xff08;COM和LPT&#xff09;】中找到我们插入的某个设备的物理序号&#xff0c;如下图红色矩形框出的信息&#xff0c;这个就是已插入设备的物理序号&#xff08;就是插在哪个USB口的意思&#xff09;。 在Linux下我们可以通过往/et…
阅读更多...
linux下安装kkFileView4

linux下安装kkFileView4

kkFileView为文件文档在线预览解决方案&#xff0c;该项目使用流行的spring boot搭建&#xff0c;易上手和部署&#xff0c;基本支持主流办公文档的在线预览&#xff0c;如doc,docx,xls,xlsx,ppt,pptx,pdf,txt,zip,rar,图片,视频,音频等等 安装kkFileView前需要安装LibreOffic…
阅读更多...
螺栓常用的防松方法

螺栓常用的防松方法

螺栓防松原理可以分为三种:摩擦防松、机械防松和永久防松。摩擦防松与机械防松为可拆卸防松&#xff0c;而永久防松为不可拆卸防松。 永久防松平常接触较少&#xff0c;这里只简单介绍一下常用的永久防松方法有:点焊、铆接、粘合等。这些方法在拆卸时大多要破坏螺纹紧固件&…
阅读更多...
SAP ERP公有云（全称 SAP S/4HANA Cloud Public Edition），赋能企业成为智能可持续的企业

SAP ERP公有云（全称 SAP S/4HANA Cloud Public Edition），赋能企业成为智能可持续的企业

在数字化浪潮中&#xff0c;每一家企业都需要应对快速的市场变化&#xff0c;不断追求降本增效&#xff0c;为创新提供资源&#xff0c;发展新的业务模式&#xff0c;安全无忧地完成关键任务系统的转型。 10年前&#xff0c;SAP进入云领域&#xff0c;用云ERP和覆盖全线业务的云…
阅读更多...
【C++题解】1714. 输出满足条件的整数4

【C++题解】1714. 输出满足条件的整数4

问题:1714. 输出满足条件的整数4 类型&#xff1a;简单循环 题目描述&#xff1a; 输出 1∼n 中含有数字 3 或者含有数字 5 &#xff0c;且因数有 2 &#xff08;即能被 2 整除&#xff09;的所有整数。&#xff08;n<1000&#xff09; 输入&#xff1a; 从键盘输入一个…
阅读更多...
使用深度远程启动管理器配置BMC DHCP管理地址的方法

使用深度远程启动管理器配置BMC DHCP管理地址的方法

目录 1.请确保服务器BMC是DHCP状态&#xff0c;才可以使用深度工具分配地址&#xff1b;若BMC配置过静态地址&#xff0c;请使用静态地址登录&#xff1b; 2.配置好自己笔记本的 ip&#xff08;例如&#xff1a;192.168.78.1&#xff09;&#xff0c;用网线与 ipmi 独立管理口…
阅读更多...
结构冒险，控制冒险，数据冒险实例分析

结构冒险，控制冒险，数据冒险实例分析

目录 1.结构冒险&#xff1a; 2.数据冒险&#xff1a; 3.控制冒险&#xff1a; 指令执行过程&#xff1a; 取指(IF)&#xff1a;从指令存储器或 Cache 中取指令。 译码/读寄存器(ID)&#xff1a;操作控制器对指令进行译码&#xff0c;同时从寄存器堆中取操作数。 执行/计算地…
阅读更多...
获取个人免费版Ubuntu Pro

获取个人免费版Ubuntu Pro

首先上官网地址&#xff1a;Ubuntu Pro | Ubuntu 点击页面中的"Get Ubuntu Pro now" 将用途选为“Myself”&#xff0c;在此页面中Ubuntu说明了该版本只面向个人开发者&#xff0c;且最终只允许5台设备免费使用&#xff1b;因而部署设备的抉择就不得不慎重考虑了&am…
阅读更多...
39 - 安全技术与防火墙

39 - 安全技术与防火墙

39、安全技术和防火墙 一、安全技术 入侵检测系统&#xff1a;特点是不阻断网络访问&#xff0c;主要是提供报警和事后监督。不主动介入&#xff0c;默默看着你&#xff08;监控&#xff09;。 入侵防御系统&#xff1a;透明模式工作&#xff0c;数据包&#xff0c;网络监控…
阅读更多...
Linux常见操作问题

Linux常见操作问题

1、登录刚创建的用户&#xff0c;无法操作。 注&#xff1a;etc/passwd文件是Linux操作系统中存储用户账户信息的文本文件&#xff0c;包含了系统中所有用户的基本信息&#xff0c;比如用户名、用户ID、用户组ID、用户家目录路径。 注&#xff1a;etc: 这个目录存放所有的系统…
阅读更多...
Linux 命令：iftop

Linux 命令：iftop

1. 写在前面 本文主要介绍 Linux iftop&#xff08;Interface TOP&#xff09; 命令&#xff1a;iftop 是一款小巧、免费且功能强大的网卡实时流量监控工具。监控指定网卡的实时流量、端口连接信息、反向解析 IP 等&#xff0c;还可以精确显示本机网络流量及网络内各主机和本机…
阅读更多...
记录待办事项的便签软件哪个好用？

记录待办事项的便签软件哪个好用？

在快节奏的现代生活中&#xff0c;我们经常需要处理各种各样的待办事项&#xff0c;为了更好地管理时间&#xff0c;许多人选择使用便签软件来记录自己的待办事项。那么&#xff0c;记录待办事项的便签软件哪个好用&#xff1f;市面上众多的便签软件中&#xff0c;哪一个才是最…
阅读更多...
HashMap第5讲——resize方法扩容源码分析及细节

HashMap第5讲——resize方法扩容源码分析及细节

put方法的源码和相关的细节已经介绍完了&#xff0c;下面我们进入扩容功能的讲解。 一、为什么需要扩容 这个也比较好理解。假设现在HashMap里的元素已经很多了&#xff0c;但是链化比较严重&#xff0c;即便树化了&#xff0c;查询效率也是O(logN)&#xff0c;肯定没有O(1)好…
阅读更多...
Proxmox VE（PVE）上手配置指南

Proxmox VE（PVE）上手配置指南

Proxmox VE&#xff08;PVE&#xff09;是一款开源虚拟化管理平台&#xff0c;集成了KVM和LXC技术&#xff0c;支持虚拟机和容器管理。它提供了一个基于Web的用户界面&#xff0c;支持高可用性集群、备份和恢复、实时迁移等功能&#xff0c;适用于企业级虚拟化环境。. 以下为安…
阅读更多...
安装GroudingDINO RuntimeError: Error compiling objects for extension，如何解决？

安装GroudingDINO RuntimeError: Error compiling objects for extension，如何解决？

&#x1f3c6;本文收录于「Bug调优」专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&&…
阅读更多...
VCS编译bug汇总

VCS编译bug汇总

‘typedef’ is not expected to be used in this contex 注册前少了分号。 Scope resolution error resolution : 声明指针时 不能与类名同名&#xff0c;即 不能声明为adapter. cannot find member "type_id" 忘记注册了 拼接运算符使用 关键要加上1b&#xff0…
阅读更多...
opencascade AIS_InteractiveContext源码学习6 management of active Selection Modes

opencascade AIS_InteractiveContext源码学习6 management of active Selection Modes

AIS_InteractiveContext 前言 交互上下文&#xff08;Interactive Context&#xff09;允许您在一个或多个视图器中管理交互对象的图形行为和选择。类方法使这一操作非常透明。需要记住的是&#xff0c;对于已经被交互上下文识别的交互对象&#xff0c;必须使用上下文方法进行…
阅读更多...
计算机网络期末复习（大题+小题）

计算机网络期末复习（大题+小题）

计算机网络期末复习 一、计算机网络概述 Point 1 计算机网络就是以传输信息为基本目的&#xff0c;用通信线路和通信设备将多个计算机连接起来的计算机系统的集合。由自治的计算机互联起来的结合体。 Point 2 按网络的覆盖范围进行分类 &#xff08;1&#xff09;局域网*…
阅读更多...
最新文章

Copyright @ 2022~2023