构建网络图 (JavaScript)

已于 2024-06-25 09:17:00 修改
阅读量866 收藏 9
点赞数 20
分类专栏： javascript实战 文章标签： javascript 前端 开发语言 dnn
于 2024-06-20 14:35:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41422591/article/details/139830823
版权

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

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

喂！大掌柜
关注
  • 20
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
使用百度地图JavaScript API构建离线地图应用（完整教程）
Stay Hungry
11-06 3万+
最近由于项目需要，需要在网页上构建地图应用，想到了百度地图API。但由于百度地图官方不支持JS离线地图，只有想出此办法实现，在此记录下来，希望能帮上需要的朋友。 本教程是在一位仁兄的基础之上做的拓展，可以先参看一下——使用百度地图离线JavaScript API加载本地瓦片地图。此教程完整的Demo，可以在文章底部找到。效果图如下： 具体实现步骤如下： 一、获取百度地图API。此处版
绘制上海地铁网络图
weixin_43813389的博客
02-15 3413
Day.1绘制上海地铁网络图 需求 1.网络图适配iOS、android、web、大屏 2.线路高亮 技术选择 vue + d3 方法设计 1.初始化 var metro = function (info) {} 2.创建路线 var createPaths = function (lines) {} 3.创建站点 var createStations = function(stations) {} 4.显示遮盖层 var showTransparentCover = function () {} 5.线路
使用 ​ NeXt UI JavaScript 库​创建网络拓扑图
allway2的博客
11-06 2023
NeXt 是一个 ODL Web 界面，用于可视化网络和该网络内的通信。它是一个开放的图形工具，可以显示物理或虚拟网络元素，例如流量、隧道路径和组及其属性。此外，它还可以构建分层拓扑，例如，在底层显示覆盖网络。它可以与 Dlux 一起构建 ODL 应用程序。 NeXt 由 Cisco 做出了重大贡献，您可以在 Cisco DevNet 中找到 NeXt 的许多增强功能。 我有一点空闲时间，想使用Cisco 的 NeXt UI Toolkit，这是一个 JavaScript 库，它提供生成网络拓扑图的功.
ArcGIS API for JavaScript——地图展示
LONG
11-27 2596
ArcGIS API for JavaScript 能够实现的最基本功能就是地图展示，包括地图缩放、平移、定位、实时显示坐标、展示地图要素（指北针、比例尺、图例）、切换地图等。本文将详细介绍地图展示的代码构成以及常用的部件等。
基于C++和JavaScript实现网络图的构建.zip
07-06
1.网络图的构建 2.核心算法的实现 3.算法可视化 操作系统：windows10（版本号1607） IDE:visualstudio2015 HTML编辑：火狐浏览器 编程语言：C++，JavaScript 详细介绍参考：...
JavaScript_图纸的官方电子构建.zip
05-20
- **Draw.io**：可能是一个开源的图表绘制工具，常用于创建流程图、UML图、网络图等。开发版本（_dev）通常包含源码、构建脚本和其他开发相关资源。 - **JavaScript图表库**：在JavaScript中，有许多库用于生成...
基于Python+JavaScripts实现网络图的构建【100012084】
04-28
在构建网络图时，Python提供了强大的库，如NetworkX。NetworkX是一个用于创建、操作和研究复杂网络结构的开源库。利用NetworkX，我们可以方便地创建节点、添加边、执行各种网络分析，例如计算度中心性、聚类系数等。...
基于javascript的前端画图库，可用于构建可拖拽、可灵活定义的流程图、网络图、知识图谱展示等
03-06
基于javascript的前端画图库，可用于构建可拖拽、可灵活定义的流程图 主要api参考 创建节点：createNode(param, x, y) 批量创建节点：createNodes(params) 创建连接：createLink(sourceDom, targetDom) 清除所有节点...
网络图
02-13
这些项目可能包含HTML、CSS和JavaScript文件，展示了如何配置和使用这些库来构建网络图。例如，HTML文件可能包含图表的容器，CSS文件用于美化图表，而JavaScript文件则是实现网络图逻辑的核心部分，包括数据加载、库...
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1311
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue前端打包
weixin_63680330的博客
07-04 215
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
Vue 3集成krpano 全景图展示
最新发布
Mr丶GUO
07-06 274
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
前端播放RTSP视频流，使用FLV请求RTSP视频流播放（Vue项目，在Vue中使用插件flv.js请求RTSP视频流播放）
weixin_65793170的博客
07-01 1035
在浏览器中请求 RTSP 视频流并进行播放时，直接使用原生的浏览器 API 是行不通的，因为它们不支持 RTSP 协议。为了解决这个问题，开发者通常会选择使用像 flv.js 这样的库，它专为在浏览器中播放 FLV 和其他流媒体格式设计。然而，flv.js 本身并不直接支持 RTSP，这意味着我们需要一个额外的步骤来桥接 RTSP 和 flv.js。
JS混淆基本类型和原理
朴拙科技的博客
07-06 402
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
Vue 数据大屏适配
FitnessSnail的博客
07-02 269
不会因为在某一维度上缩放过大而导致元素在另一维度上超出视口。.dataScreen-content 盒子内容根据设计稿给的。（默认为 1920x1080）计算缩放比例，并。的缩放比例，那么元素可能会在某一维度上。，这在很多情况下是不希望发生的。的缩放比例的目的是为了保证。单位进行正常的布局就行。在水平和垂直方向上都。
vue3+ts项目中.env配置环境变量与情景配置
我愿化作繁星
07-03 867
就是在编码过程中应用这些自定义环境变量的时候，给出的智能提示。src目录下创建一个或者env.d.ts文件src同级别types目录下创建文件env.d.ts// 更多环境变量...在文件中专门用于处理项目src文件中的TypeScript配置文件，include配置项加入文件：(会提示自定义设置的环境变量)// ...// 第一种方式对应配置"vite-env.d.ts", // 或者 "env.d.ts"// 第二种方式对应配置。
文本超长省略的几种方式（vue）
csdnyp的博客
07-01 355
文本超长省略，el-tooltip
【VUE】 深入理解 Vue 动态路由：简介、实际开发场景与代码示例
九日的博客
07-04 324
在传统的路由配置中，我们需要在初始化 Vue 实例时定义所有的路由。但在实际应用中，特别是涉及权限管理、模块懒加载等场景，我们可能需要根据用户的权限或其它条件动态添加或修改路由。Vue Router 提供的动态路由功能正是为了解决这些问题。
vue3wangeditor网络图片
03-20
Vue3和Wangeditor是两个不同的技术，分别用于前端开发和富文本编辑器。下面我会分别介绍一下Vue3和Wangeditor，并回答你关于网络图片的问题。 Vue3是一种流行的JavaScript框架，用于构建用户界面。它是Vue.js的最新版本，具有更好的性能和更多的特性。Vue3采用了一种名为Composition API的新的组合式API，使得代码更加模块化和可复用。它还引入了一些新的特性，如Teleport、Suspense等，以提供更好的开发体验。 Wangeditor是一款基于JavaScript的富文本编辑器，它提供了丰富的编辑功能，包括文字样式、插入图片、插入表格等。Wangeditor支持自定义配置和扩展，可以根据需求进行定制化开发。在使用Wangeditor时，你可以通过插入网络图片的方式来添加图片到编辑器中。 关于网络图片的问题，你可以通过以下几种方式在Wangeditor中插入网络图片： 1. 直接粘贴：在编辑器中使用Ctrl+V（或Cmd+V）将网络图片的URL粘贴到编辑器中，Wangeditor会自动将其转换为图片。 2. 插入链接：在编辑器中选择插入图片的功能，然后输入网络图片的URL即可插入。 3. 自定义插入：如果你需要更多的自定义操作，可以通过Wangeditor提供的API来实现，具体可以参考Wangeditor的官方文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

喂！大掌柜

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

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

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

打赏作者

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

抵扣说明：

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

余额充值