图表图鉴 / 关系与连接 / 第 16 号标本

力导向网络图

用于刻画实体之间的连接结构: 依赖、引用、社交或拓扑。本页以一个虚构但结构真实的前端开源依赖网络为样本, 演示力导向布局的编码原理: 节点半径编码度数, 社区以色相加形状双通道着色, 边宽编码依赖权重, 并给出布局失控的对照与邻接表后备。

标本来源: 图表选型数据 No.16 / 数据类型: Relationship / Connection / 最佳图型: Network Graph / 次选: Hierarchical Tree, Adjacency Matrix / 无障碍风险: high

01 / 编码原理

度数、社区与边权: 一张静态大图怎么读

开源依赖网络: 24 个包 36 条依赖边, 力导向预排布 四个社区: 构建核心为圆形, 校验与模式为菱形, 服务与路由为方形, 基础工具为三角形。节点半径随度数增大, 边越粗表示依赖调用越重, 虚线为开发期依赖。完整数值见下方邻接表。 构建核心 校验与模式 服务与路由 基础工具 bundler-core roll-tokens esb-bridge watch-grid cache-vault map-sourcer config-schema schema-forge typed-fields coerce-cast proto-check err-codec hyperlane router-seven middleware-rack fetch-lite serve-static mock-relay utilshed deep-merge path-joinery date-roll tiny-uuid log-tap

聚焦或悬停任一节点, 此处读出社区、度数与全部邻居。键盘: 方向键在节点间移动, Enter 下钻邻接表, Esc 清除。

构建核心 校验与模式 服务与路由 基础工具 重依赖 中依赖 轻依赖 开发期依赖 聚焦高亮 虚线椭圆为社区轮廓

02 / 布局失控

头发丝问题: 当力导向不再可读

力导向布局的代价随规模非线性增长: 边密度一旦超过阈值, 弹簧力把所有节点拉成一团灰雾, 社区、度数与桥全部消失, 这就是头发丝 (hairball) 问题。左右为同一规模的对照样。

失控样 / 20 节点 41 边, 未聚类直接渲染

社区淹没在线团里, 度数差异被抹平, 桥无法辨认。继续加节点只会更糟: 力导向不会自愈。

受控样 / 同规模先聚类再布局, 15 节点 18 边

先聚类 (形状与色相标社区) 再布局, 社区成块、桥边显形、度数可分辨。三条桥边是唯一允许的跨社区连线。

何时不用 (官方)

  • 节点 > 500 且未预先聚类
  • 用户需要精确的连接计数
  • 移动端语境 (触点小、无悬停)

数据量分档 (官方)

  • 不超 100 节点: SVG
  • 101 至 500: Canvas
  • 超过 500: 先聚类与 LOD 再渲染

次选图型 (官方)

  • Hierarchical Tree: 关系呈树状从属时
  • Adjacency Matrix: 需要精确计数时

03 / 邻接表后备

邻接表: 可访问的事实源

屏幕阅读器读不了力导向布局。按官方要求, 邻接表与关系摘要承担全部数值事实, 上方的 SVG 只是视觉增强。聚焦节点后按 Enter, 对应行与邻居行会在表中标出。

节点 24边 36平均度 3.0密度 0.130最大度 8桥节点 log-tap (横跨构建、服务、工具三社区)

包社区度数直接邻居运行时/开发
bundler-core构建核心8roll-tokens、esb-bridge、watch-grid、config-schema、map-sourcer、cache-vault、log-tap、utilshed6/2
roll-tokens构建核心2bundler-core、typed-fields2/0
esb-bridge构建核心3bundler-core、config-schema、map-sourcer3/0
watch-grid构建核心2bundler-core、cache-vault0/2
cache-vault构建核心2bundler-core、watch-grid0/2
map-sourcer构建核心2bundler-core、esb-bridge2/0
config-schema构建核心3bundler-core、esb-bridge、schema-forge3/0
schema-forge校验与模式6typed-fields、coerce-cast、proto-check、config-schema、router-seven、err-codec6/0
typed-fields校验与模式3schema-forge、coerce-cast、roll-tokens3/0
coerce-cast校验与模式3schema-forge、typed-fields、utilshed3/0
proto-check校验与模式2schema-forge、mock-relay1/1
err-codec校验与模式2schema-forge、middleware-rack2/0
hyperlane服务与路由7router-seven、middleware-rack、fetch-lite、serve-static、mock-relay、log-tap、utilshed5/2
router-seven服务与路由3hyperlane、serve-static、schema-forge3/0
middleware-rack服务与路由2hyperlane、err-codec2/0
fetch-lite服务与路由1hyperlane0/1
serve-static服务与路由3hyperlane、router-seven、path-joinery3/0
mock-relay服务与路由2hyperlane、proto-check0/2
utilshed基础工具8bundler-core、coerce-cast、hyperlane、deep-merge、path-joinery、date-roll、tiny-uuid、log-tap8/0
deep-merge基础工具1utilshed1/0
path-joinery基础工具2utilshed、serve-static2/0
date-roll基础工具1utilshed1/0
tiny-uuid基础工具1utilshed1/0
log-tap基础工具3bundler-core、hyperlane、utilshed3/0
标行规则: 橙底为本体, 浅底为邻居

04 / 无障碍要点

让力导向布局可聚焦、可读值、可核对

  • 1双通道社区编码: 社区同时用形状 (圆、菱、方、三角) 与色相区分, 虚线椭圆轮廓加文字标注兜底, 不依赖色觉。
  • 2节点可聚焦读值: 每个节点可 Tab 聚焦, 读值面板即时报出社区、度数、运行时/开发边数与全部邻居, role 为 status 的实时区同步播报。
  • 3方向键替代拖拽: 按官方要求, 上/下/左/右在节点间按几何方向移动焦点, 键盘用户不需要鼠标拖拽。
  • 4Enter 下钻: 聚焦节点按 Enter, 邻接表中本体行与邻居行同时标出并滚动到位, 图与表可互相核对。
  • 5邻接表为事实源: 风险等级 high。SVG 图是增强层, 全部数值以邻接表与关系摘要为准; 高亮除变色外同时增粗线宽并压暗非邻域。

键盘操作表

按键行为
Tab逐个聚焦网络节点, 顺序与邻接表一致 (按社区分组)
上 下 左 右按几何方向跳到最近的节点, 替代拖拽浏览
Enter 或 Space下钻: 在邻接表中标出本体行与邻居行
Esc清除当前聚焦, 读值面板回到初始提示

动效仅在首次亮相时播放一次节点弹入; 系统开启减少动态偏好时全部降级为静态呈现。