前序：在工作中难免有一些千奇百怪的需求，如果你遇到构建网络图，或者学习应对未来，请看这边文章，本文以代码为主。
网络图是数据可视化中实用而有效的工具，特别适用于说明复杂系统内的关系和连接。这些图表有助于理解各种背景下的结构，从社交网络到企业层级。在本教程中，我们将深入研究使用 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" },