有向图的邻接矩阵_图形算法（邻接矩阵）在前端领域的应用

本文为代发，原作者为蚂蚁保险体验技术组-伯龄

前言

最近有些小伙伴在写表单联动关系是觉得非常复杂，不知道从何下手。大多数情况下会要求后端同学给到嵌套结构，但是这种结构有个致命的缺点，无法向上联动而且存在大量多余数据。推荐了一下邻接矩阵发现有好多同学不了解，写个简单的科普文章解释一下。

什么是邻接矩阵

别问惯性开头没有为什么

邻接矩阵是一个用来描绘顶点与边关系的数据结构。它的本质是一个二维数组，适合用来处理最小数据单元之间的关联关系。邻接矩阵有两种模式：无向图以及有向图。无向图主要的特点是不表示方向点与点之间可以双向流通，有向图则包含方向两点间可单向亦可双向。他们主要应用在迷宫、简单地图、级联表单等等图形化场景

无向图

描述

无向图：指的是点与点之间的关联边没有方向限制。两点间可以来回往返

举个例子：

上图就是一个简单边与点的关联关系：

V0 相接的顶线是 v2 v3

V1 相接的顶线是 v3 v4

V2 相接的顶线是 v0 v3 v4

V3 相接的顶线是 v0 v1 v2

V4 相接的顶线是 v1 v2

以上图形被邻接矩阵数据化以后是怎么样的格式呢？

const 

无向图的几个特点：

• 矩阵的length必然是顶点个数的平方 lengt^2
• 矩阵斜边必然无值
• 矩阵依据斜边对称

简单实现

简单介绍后,我们通过JS简单实现一个邻接矩阵无向图

class 

应用场景：联动表单

经过上面的简单介绍我们应该对邻接矩阵无向图有一个基本概念。那么我们怎么应用到实际的项目中呢。下面是一个我们再熟悉不过的天猫下单规格选择页面，这个销售页面的订单页面包含颜色、套餐类型、储存容量等三个关键因子。而且三个关键因子间存在相互关联关系。

分析交互

• 当用户选择颜色的规格时，所有黑色相关的可选项均亮起
• 同规格可选项也为亮起状态
• 当用户选择套餐类型时，在颜色以及套餐的公共作用下，部分规格亮起

如果让后端下发一个递归的树结构1：会产生非常多的数据囤余。2：导致传输的数