如何使用 JavaScript 创建网络图

网络图是数据可视化中实用且有效的工具，对于说明复杂系统内的关系和连接特别有用。这些图表对于理解各种环境中的结构很有用，从社交网络到公司层次结构。在本教程中，我们将深入探讨使用 JavaScript 创建引人注目的交互式网络图的快速路径。

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

了解网络图

网络图由节点和边组成，节点表示个人或组织等实体，而边则描述它们之间的关系。这些视觉效果对于剖析和展示复杂网络的架构非常宝贵，揭示了显性和微妙的联系。

实际上，网络图可以帮助说明公司内部的层次结构、不同部门之间的交互或通信或资源的流动。从视觉上看，这些图形使用各种元素（如节点大小、颜色和边缘厚度）来传达有关关系的重要性、类型和强度的信息。

以下是我们将在本教程结束时创建的内容的预览 - 一个完全交互式的网络图，它不仅可以作为大众汽车集团的可视化地图，还可以利用 JavaScript 的动态特性来更深入地探索数据。

构建网络图的分步指南

创建网络图涉及几个关键步骤，每个步骤都有助于最终结果。以下是我们将在本教程中介绍的内容的简要概述：

创建 HTML 页面： 在这里，我们设置了可视化结构，提供了一个画布，其中将显示我们的网络图。
包括必要的 JavaScript 文件： 对于图形功能至关重要，我们将合并构建和管理网络图形所需的脚本。
准备数据： 在这里，我们将数据组织成一种可以在网络图中平滑可视化的格式，区分不同类型的节点及其连接。
编写用于可视化的 JavaScript 代码： 最后一步是编写逻辑脚本，使我们的图形栩栩如生，从而实现交互性以更好地理解基础数据。

以下各节将详细介绍这些步骤中的每一个，以确保您在使用 JavaScript 创建自己的网络图时有一个清晰的路线图可以遵循。让我们潜入并开始可视化吧！

第 1 步：设置 HTML

如果您要从头开始构建，请首先为网页创建基本结构。这包括设置将托管网络图的 HTML 文档。以下是编写 HTML 的方法：

xml 复制代码

<!DOCTYPE html>
<html>

<head>

  <title>Network Graph in JavaScript</title>

  <style type="text/css">

    html, body, #container {

      width: 100%; height: 100%; margin: 0; padding: 0;

    }


    </style>

</head>

<body>

  <div id="container"></div>

</body>

</html>

这种简单的 HTML 结构是基础。标识的标签是我们的网络图的渲染位置。随附的 CSS 确保图表使用整个屏幕，优化视觉空间并确保图表既突出又清晰。<div>``id="container"

第 2 步：JavaScript 文件

为了将我们的网络图集成到 Web 环境中，让我们直接在 HTML 框架中合并一个 JavaScript 图表库。

市面上有多个库，但并非所有库都支持网络图。您可以查看 JavaScript 图表库的全面比较，其中详细介绍了各种库的一些功能，包括对网络图的支持。在列出的库中，amCharts 、AnyChart 、D3.js 和 HighCharts 等库是支持网络图的流行选项。在本教程中，我们将使用 AnyChart。这是我多年来广泛使用的库之一，我认为它可以很好地说明该过程的通用逻辑，并且对于那些刚接触 JS 图表的人来说很容易上手。

无论您选择哪种库，这里都是将必要的 JS 脚本编织到 HTML 中的方式，位于该部分中。此外，我们准备了该部分，以包含我们即将使用的 JavaScript 代码，这些脚本将动态呈现网络图：<head>``<body>

xml 复制代码

<html>
  <head>
    <title>Network Graph in 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>
      // JS code for the network graph will be here
    </script>
  </body>
</html>

第 3 步：构造数据

准备好 HTML 和 JS 文件后，是时候定义我们的节点和边缘了------网络图的基本组件。这涉及构建大众汽车集团的数据，从母公司到每个产品线。

kotlin 复制代码

 var data = {
  "nodes": [
    {"id": "Volkswagen Group", "group": "CoreCompany"},
    {"id": "Audi", "group": "ChildCompany"},
    {"id": "Audi Cars", "group": "Product"},
    // More nodes here...
  ],
  "edges": [
    {"from": "Volkswagen Group", "to": "Audi"},
    {"from": "Audi", "to": "Audi Cars"},
    // More edges here...
  ]
};

第 4 步：编排 JavaScript 以可视化网络

这一关键步骤将结构化数据转换为提供的 HTML 画布中充满活力的交互式网络图。为了确保清晰和易于理解，我将此过程分为三个直观的子步骤，每个子步骤都使用自己的代码片段进行演示。

1. 初始化

首先，我们确保 JavaScript 可视化代码仅在 HTML 文档完全加载后执行。这一点至关重要，因为它可以防止在 HTML 完全准备好之前进行任何 DOM 操作尝试。

javascript 复制代码

anychart.onDocumentReady(function () {
 // Initialization of the network graph will happen here
});

2. 创建图形实例

在函数中，我们初始化我们的网络图。在这里，我们使用预定义的数据创建一个图形对象和图表。这个实例将作为我们可视化的基础。

ini 复制代码

var chart = anychart.graph(data);

3. 设置图形容器

下一步是指定我们的网络图在网页上应直观呈现的位置。这链接到我们之前定义的 HTML 容器。

JavaScript

arduino 复制代码

chart.container("container");

4. 渲染图

最后一步是指示图形在指定的容器中绘制自身。这一行动使我们的数据栩栩如生，展示了大众汽车集团内部的复杂关系。

JavaScript

ini 复制代码

chart.draw();

这些子步骤共同确保我们的网络图不仅使用正确的数据和配置进行初始化，而且还在网页上正确放置和呈现，从而为企业关系提供动态和信息丰富的可视化探索。

网络图可视化展开

现在我们的网络图已经完成，您可以看到下面的结果图片，它展示了大众汽车集团的复杂结构。这个交互式图表不仅提供信息，还证明了 JavaScript 在跨平台交互式数据可视化方面的强大功能。

为了获得实践体验，我邀请您在 CodePen 上以交互方式探索此图表，您可以在其中修改代码、尝试不同的配置并更好地了解网络图的复杂性。下面提供了此项目的完整 HTML/CSS/JavaScript 代码 --- 将其用作您自己的可视化项目的参考或起点。

xml 复制代码

<html>
  <head>
    <title>Network Graph in 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 () {
        // Create data
        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"}
          ]};
        // Initialize the network graph with the provided data structure
        const chart = anychart.graph(data);
        // Specify the HTML container ID where the chart will be rendered
        chart.container("container");
        // Initiate the rendering of the chart
        chart.draw();
      });
    </script>
  </body>
</html>

自定义 JavaScript 网络图

在建立了大众汽车集团的基本网络图之后，让我们增强其功能和美观性。本教程的这一部分将指导您完成一些不同的自定义选项，向您展示如何将基本的 JavaScript 网络图演变为信息量更大、视觉上更具吸引力的可视化效果。

每个自定义步骤都建立在前面的代码之上，引入了新功能和修改，并让查看者更深入地了解大众汽车公司结构中的关系。

显示节点标签

了解每个节点所代表的内容在网络图中至关重要。默认情况下，节点标签可能不会显示，但我们可以很容易地启用它们，使我们的图形更具信息性。

JavaScript

scss 复制代码

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

在节点上启用标签可确保清晰标识每个节点，使用户更容易一目了然地了解数据，而无需单独与每个节点进行交互。

配置 Edge 工具提示

为了增强用户交互，当将鼠标悬停在节点之间的连接（边）上时，工具提示可以提供其他信息。此步骤涉及配置显示连接节点之间关系的工具提示格式。

JavaScript

perl 复制代码

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

此工具提示配置有助于阐明图表中的联系，显示母公司与其子公司之间的直接所有权或隶属关系，增强用户对图表的理解和交互。

自定义节点外观

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

JavaScript

scss 复制代码

// 1) configure settings for nodes representing the core company
chart.group('CoreCompany')
  .stroke('none')
  .height(45)
  .fill('red')
  .labels().fontSize(15);
// 2) configure settings for nodes representing child companies
chart.group('ChildCompany')
  .stroke('none')
  .height(25)
  .labels().fontSize(12);
// 3) configure settings for nodes representing products
chart.group('Product')
  .shape('square')
  .stroke('black', 1)
  .height(15)
  .labels().enabled(false);

这些设置增强了图形的视觉层次结构。核心公司节点比较突出，子公司比较容易区分，产品节点不太强调，但结构清晰，有助于对图结构进行快速的视觉处理。

设置图表标题

向图表添加标题可提供上下文并介绍视觉内容。这是一种简单而有效的方法，可以告知查看者网络图的用途。

JavaScript

arduino 复制代码

chart.title("Volkswagen Group Network");

标题"大众汽车集团网络"立即告知查看者图表的焦点，增加了专业感并增强了整体清晰度。

最终网络图可视化

通过这些自定义，我们的网络图现在是一个详细的交互式可视化，可以进行深入探索。以下是包含所讨论的所有增强功能的完整代码。这个版本的基于JS的网络图不仅是一个显示静态数据的工具，也是大众汽车集团复杂结构的动态地图。

我邀请您在 CodePen 上查看此图表并与之交互，以了解其运行情况并进一步调整代码以满足您的特定需求。为方便起见，下面还提供了完整的网络图代码：

xml 复制代码

<html>
  <head>
    <title>Network Graph in 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 () {
        // Create data
        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"}
          ]};
        // Initialize the network graph with the provided data structure
        const chart = anychart.graph(data);
        // Customization step #1:
        // display chart node labels
        chart.nodes().labels().enabled(true);
        // Customization step #2:
        // configure edge tooltips
        chart.edges().tooltip().format("{%from} owns {%to}");
        // Customization step #3:
        // customizing node appearance:
        // 1) configure settings for nodes representing the core company
        chart.group('CoreCompany')
          .stroke('none')
          .height(45)
          .fill('red')
          .labels().fontSize(15);
        // 2) configure settings for nodes representing child companies
        chart.group('ChildCompany')
          .stroke('none')
          .height(25)
          .labels().fontSize(12);
        // 3) configure settings for nodes representing products
        chart.group('Product')
          .shape('square')
          .stroke('black', 1)
          .height(15)
          .labels().enabled(false);
        // Customization step #4:
        // set the title of the chart for context
        chart.title("Volkswagen Group Network");
        // Specify the HTML container ID where the chart will be rendered
        chart.container("container");
        // Initiate the rendering of the chart
        chart.draw();
      });
    </script>
  </body>
</html>